import { Control, FieldErrors } from "react-hook-form";
import { FirstTimeHomeBuyerFormData } from "../schema";
import FormInput from "@/src/components/form/FormInput";
import FormSelect from "@/src/components/form/FormSelect";

interface Step1Props {
  control: Control<FirstTimeHomeBuyerFormData>;
  errors: FieldErrors<FirstTimeHomeBuyerFormData>;
  isReadOnly: boolean;
  countryOptions: { label: string; value: string }[];
  stateOptions: { label: string; value: string }[];
  cityOptions: { label: string; value: string }[];
  onCountryChange: () => void;
  onStateChange: () => void;
}

export default function Step1({
  control,
  errors,
  isReadOnly,
  countryOptions,
  stateOptions,
  cityOptions,
  onCountryChange,
  onStateChange,
}: Step1Props) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Applicant Name */}
      <FormInput
        name="applicantName"
        control={control}
        label="Applicant's Legal Name(s)"
        placeholder="Applicant Name"
        required
        disabled={isReadOnly}
        error={errors.applicantName}
      />

      {/* Co-Applicant Name */}
      <FormInput
        name="coApplicantName"
        control={control}
        label="Co-Applicant's Legal Name(s)"
        placeholder="Co-Applicant Name"
        disabled={isReadOnly}
      />

      {/* Email */}
      <FormInput
        name="email"
        control={control}
        label="E-Mail Address"
        type="email"
        placeholder="Email"
        required
        disabled={isReadOnly}
        error={errors.email}
      />

     

      {/* Country */}
      <FormSelect
        name="country"
        control={control}
        label="Country"
        options={countryOptions}
        placeholder="Select country"
        required
        disabled={isReadOnly}
        error={errors.country}
        onChange={onCountryChange}
      />

      {/* State */}
      <FormSelect
        name="state"
        control={control}
        label="State"
        options={stateOptions}
        placeholder="Select State"
        required
        disabled={!stateOptions.length || isReadOnly}
        error={errors.state}
        onChange={onStateChange}
      />

      {/* City */}
      <FormSelect
        name="city"
        control={control}
        label="City"
        options={cityOptions}
        placeholder="Select City"
        required
        disabled={!cityOptions.length || isReadOnly}
        error={errors.city}
      />

 
        <FormInput
          name="area"
          control={control}
          label="Area"
          placeholder="Area"
          required
          disabled={isReadOnly}
          error={errors.area}
        />
 

       {/* Phone Cell */}
       <FormInput
        name="phoneCell"
        control={control}
        label="Phone # (Cell)"
        type="tel"
        placeholder="Phone No (cell)"
        required
        disabled={isReadOnly}
        error={errors.phoneCell}
      />

      {/* Phone Work */}
      <FormInput
        name="phoneWork"
        control={control}
        label="Phone # (Work)"
        type="tel"
        placeholder="Phone No Work"
        disabled={isReadOnly}
        error={errors.phoneWork}
      />

      {/* Phone Home */}
      <FormInput
        name="phoneHome"
        control={control}
        label="Phone # (Home)"
        type="tel"
        placeholder="Phone No Home"
        disabled={isReadOnly}
        error={errors.phoneHome}
      />
    </div>
  );
}