import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import type { UseFormReturn } from 'react-hook-form';

type LocationStepProps = {
  form: UseFormReturn<any>;
};

export function LocationStep({ form }: LocationStepProps) {
  const errors = form.formState.errors;

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-lg font-semibold">Ubicación</h2>
        <p className="text-sm text-muted-foreground">¿Dónde está ubicado tu complejo?</p>
      </div>

      <Field data-invalid={Boolean(errors.physicalAddress)}>
        <FieldLabel htmlFor="physical-address">Dirección</FieldLabel>
        <Input
          id="physical-address"
          type="text"
          placeholder="Ej: Av. San Martín 1234"
          aria-invalid={Boolean(errors.physicalAddress)}
          {...form.register('physicalAddress')}
        />
        <FieldError errors={[errors.physicalAddress]} />
      </Field>

      <Field data-invalid={Boolean(errors.city)}>
        <FieldLabel htmlFor="city">Ciudad</FieldLabel>
        <Input
          id="city"
          type="text"
          placeholder="Ej: Salta"
          aria-invalid={Boolean(errors.city)}
          {...form.register('city')}
        />
        <FieldError errors={[errors.city]} />
      </Field>

      <div className="grid grid-cols-2 gap-3">
        <Field data-invalid={Boolean(errors.state)}>
          <FieldLabel htmlFor="state">Provincia / Estado</FieldLabel>
          <Input
            id="state"
            type="text"
            placeholder="Ej: Salta"
            aria-invalid={Boolean(errors.state)}
            {...form.register('state')}
          />
          <FieldError errors={[errors.state]} />
        </Field>

        <Field data-invalid={Boolean(errors.country)}>
          <FieldLabel htmlFor="country">País</FieldLabel>
          <Input
            id="country"
            type="text"
            placeholder="Ej: Argentina"
            aria-invalid={Boolean(errors.country)}
            {...form.register('country')}
          />
          <FieldError errors={[errors.country]} />
        </Field>
      </div>
    </div>
  );
}