import * as React from 'react'
import { FormProvider, type FieldValues, type UseFormReturn } from 'react-hook-form'

export interface FormProps<TFieldValues extends FieldValues = FieldValues>
  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
  form: UseFormReturn<TFieldValues>
  onSubmit: (values: TFieldValues) => void | Promise<void>
}

/**
 * Wraps react-hook-form's FormProvider. Validation is supplied by the consumer
 * via a zod resolver passed to `useForm`. `onSubmit` receives validated values.
 */
export function Form<TFieldValues extends FieldValues = FieldValues>({
  form,
  onSubmit,
  children,
  ...props
}: FormProps<TFieldValues>) {
  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} noValidate {...props}>
        {children}
      </form>
    </FormProvider>
  )
}