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

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

export function ComplexNameStep({ form }: ComplexNameStepProps) {
  const errors = form.formState.errors;

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-lg font-semibold">Nombre del complejo</h2>
        <p className="text-sm text-muted-foreground">¿Cómo se va a llamar tu complejo?</p>
      </div>

      <Field data-invalid={Boolean(errors.complexName)}>
        <FieldLabel htmlFor="complex-name">Nombre del complejo</FieldLabel>
        <Input
          id="complex-name"
          type="text"
          placeholder="Ej: Complejo Las Palmeras"
          aria-invalid={Boolean(errors.complexName)}
          {...form.register('complexName')}
        />
        <FieldError errors={[errors.complexName]} />
      </Field>
    </div>
  );
}