Implement a Card-Details Form with Dependent Validation

Implement a React card-details form with validation and dependent input behavior. Explain how changing one field causes related fields to be revalidated. ### Constraints & Assumptions The report does not provide a form specification. Use this explicit practice contract: fields are cardholder name, a selected format profile, number, expiry in `MM/YY`, and security code. Profile A requires 16 number digits and a 3-digit security code; profile B requires 15 and 4. These are synthetic validation profiles, not claims about real payment networks. Expiry must be the current month or later, using supplied `currentYear` and `currentMonth` props. Strip spaces only from the number. Submission calls an injected `onSubmit` callback with validated data; no payment integration is required. ### Clarifying Questions When should validation messages appear? Should a profile change erase entered values or retain and revalidate them? What happens if submission fails? Which validation belongs on the server as well? ### What a Strong Answer Covers Controlled state, one consistent validation function, cross-field dependencies, accessible labels and errors, submission state, and a testable contract. ### Follow-up Questions How would you infer a profile from the number instead? How do you avoid contradictory error state stored separately from current values? Why is format validation insufficient to authorize a real payment?