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

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

export default function Step1({
  control,
  errors,
  isReadOnly,
  countryOptions,
  stateOptions,
  cityOptions,
  onCountryChange,
  onStateChange,
}: Step1Props) {
  return (
    <div className="space-y-6">
      <FormSection
        title="Tenant Information" >

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormInput
            name="applicantName"
            control={control}
            label="Full Name"
            placeholder="Enter your full name"
            required
            disabled={isReadOnly}
            error={errors.applicantName}
          />

          <FormInput
            name="phoneCell"
            control={control}
            label="Cell Phone"
            placeholder="Enter your cell phone number"
            required
            disabled={isReadOnly}
            error={errors.phoneCell}
          />

          <FormInput
            name="email"
            control={control}
            label="Email Address"
            type="email"
            placeholder="Enter your email address"
            required
            disabled={isReadOnly}
            error={errors.email}
          />

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

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

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

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

          <FormInput
            name="applicantProperty"
            control={control}
            label="Property Address"
            placeholder="Enter the property address"
            required
            disabled={isReadOnly}
            error={errors.applicantProperty}
          />
        </div>



      </FormSection>
    </div>
  );
}