import React from 'react';
import { FormSection } from '../../../components/forms/FormSection';
import { FormField } from '../../../components/forms/FormField';
import { SelectField } from '../../../components/forms/SelectField';
import { PhoneInput } from '../../../components/forms/PhoneInput';

const jobPositions = ['Director', 'GM', 'VP', 'CEO', 'CFO', 'General Counsel', 'Other'];

interface AuthorizedRepStepProps {
  data: any;
  errors: Record<string, string>;
  onChange: (data: any) => void;
}

export function AuthorizedRepStep({ data, errors, onChange }: AuthorizedRepStepProps) {
  return (
    <div>
      <FormSection
        title="Authorized Representative"
        description="Primary contact for this registration"
      >
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-4)' }}>
          <FormField
            label="First Name"
            name="firstName"
            value={data.firstName}
            onChange={(v) => onChange({ firstName: v })}
            error={errors.firstName}
            required
          />

          <FormField
            label="Last Name"
            name="lastName"
            value={data.lastName}
            onChange={(v) => onChange({ lastName: v })}
            error={errors.lastName}
            required
          />
        </div>

        <FormField
          label="Business Title"
          name="businessTitle"
          value={data.businessTitle}
          onChange={(v) => onChange({ businessTitle: v })}
          placeholder="e.g., Director of Marketing"
          error={errors.businessTitle}
          required
        />

        <SelectField
          label="Job Position"
          name="jobPosition"
          value={data.jobPosition}
          onChange={(v) => onChange({ jobPosition: v })}
          options={jobPositions}
          error={errors.jobPosition}
          required
        />

        <PhoneInput
          label="Phone Number"
          name="phoneNumber"
          value={data.phoneNumber}
          onChange={(v) => onChange({ phoneNumber: v })}
          helpText="Enter 10-digit US number"
          error={errors.phoneNumber}
          required
        />

        <FormField
          label="Email Address"
          name="email"
          type="email"
          value={data.email}
          onChange={(v) => onChange({ email: v })}
          placeholder="contact@example.com"
          error={errors.email}
          required
        />
      </FormSection>
    </div>
  );
}