Form

import { useForm } from 'react-hook-form'
import { Input } from '@otfdashkit/ui'
import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@otfdashkit/ui/forms-form'

function RHFDemo() {
  const methods = useForm({ defaultValues: { email: '', message: '' } })
  const { handleSubmit } = methods
  return (
    <Form {...methods}>
      <form onSubmit={handleSubmit(console.log)} className="flex flex-col gap-4 max-w-sm">
        <FormField
          name="email"
          control={methods.control}
          render={({ field, fieldState }) => (
            <FormItem>
              <FormLabel error={!!fieldState.error}>Email</FormLabel>
              <FormControl>
                <Input type="email" placeholder="you@example.com" {...field} />
              </FormControl>
              <FormDescription>We'll send a confirmation.</FormDescription>
              <FormMessage name="email" />
            </FormItem>
          )}
        />
        <FormField
          name="message"
          control={methods.control}
          render={({ field, fieldState }) => (
            <FormItem>
              <FormLabel error={!!fieldState.error}>Message</FormLabel>
              <FormControl>
                <Input placeholder="Your message" {...field} />
              </FormControl>
              <FormMessage name="message" />
            </FormItem>
          )}
        />
        <button type="submit" className="rounded-[var(--radius)] bg-[hsl(var(--primary))] px-4 py-2 text-sm text-[hsl(var(--primary-foreground))]">
          Submit
        </button>
      </form>
    </Form>
  )
}

export function Example() {
  return (
    <RHFDemo />
  )
}