import type { UseFormReturn } from 'react-hook-form'
import { Button } from '@/components/ui/button'
import { Field, FieldError, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import type { StartValues } from '@/features/onboard/onboarding.types'

type OnboardingStartStepProps = {
  form: UseFormReturn<StartValues>
  errorMessage: string | null
  infoMessage: string | null
  onSubmit: (values: StartValues) => Promise<void>
}

export function OnboardingStartStep({
  form,
  errorMessage,
  infoMessage,
  onSubmit,
}: OnboardingStartStepProps) {
  return (
    <form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
      <Field data-invalid={Boolean(form.formState.errors.fullName)}>
        <FieldLabel htmlFor="onboard-fullname">Nombre</FieldLabel>
        <Input
          id="onboard-fullname"
          type="text"
          placeholder="Nombre Apellido"
          aria-invalid={Boolean(form.formState.errors.fullName)}
          {...form.register('fullName')}
        />
        <FieldError errors={[form.formState.errors.fullName]} />
      </Field>

      <Field data-invalid={Boolean(form.formState.errors.email)}>
        <FieldLabel htmlFor="onboard-email">Email</FieldLabel>
        <Input
          id="onboard-email"
          type="email"
          placeholder="tu@email.com"
          aria-invalid={Boolean(form.formState.errors.email)}
          {...form.register('email')}
        />
        <FieldError errors={[form.formState.errors.email]} />
      </Field>

      {errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
      {infoMessage && <p className="text-sm text-muted-foreground">{infoMessage}</p>}

      <Button
        type="submit"
        className="w-full"
        disabled={form.formState.isSubmitting || !form.formState.isValid}
      >
        {form.formState.isSubmitting ? 'Enviando...' : 'Enviar codigo OTP'}
      </Button>
    </form>
  )
}