import { useForm, FormProvider } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import type { DatosGenerales } from '../types'
import { datosGeneralesSchema } from '../lib/schemas'
import DatosGeneralesCampos from './DatosGeneralesCampos'
import Navegacion from './Navegacion'

export interface PasoProps<T> {
  valores: T
  onAnterior?: () => void
  onSiguiente: (datos: T) => void
}

/** Paso 1: datos generales del cliente */
export default function DatosGeneralesForm({ valores, onSiguiente }: PasoProps<DatosGenerales>) {
  const metodos = useForm<DatosGenerales>({
    resolver: zodResolver(datosGeneralesSchema),
    defaultValues: valores,
    mode: 'onSubmit',
  })

  return (
    <FormProvider {...metodos}>
      <form onSubmit={metodos.handleSubmit(onSiguiente)} noValidate>
        <DatosGeneralesCampos prefix="" />
        <Navegacion />
      </form>
    </FormProvider>
  )
}