"use client";

import { useForm } from "react-hook-form";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "./form";

export default function FormDemo() {
  const form = useForm({ defaultValues: { email: "" } });

  return (
    <div className="flex items-center justify-center p-8">
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(() => {})}
          className="w-full max-w-sm space-y-2"
        >
          <FormField
            control={form.control}
            name="email"
            rules={{ required: "Email is required." }}
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <input
                    type="email"
                    placeholder="you@example.com"
                    className="w-full rounded-base border-2 border-border bg-secondary-background px-3 py-2 text-sm font-base shadow-shadow"
                    {...field}
                  />
                </FormControl>
                <FormDescription>Enter your email address.</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    </div>
  );
}