import type { ReactNode } from 'react';
import { useForm } from 'react-hook-form';
import {
  Button,
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Input,
  Textarea,
} from 'cloudrite';

// Cloudrite is dark-only — foreground-coloured text and `border-border` are
// invisible on the preview harness's white card body. Stories render on the
// brand surface, which is also how a real screen is built.
const Surface = ({ children }: { children: ReactNode }) => (
  <div className="bg-background text-foreground rounded-lg p-6">{children}</div>
);

type Values = { name: string; email: string; message: string };

// `Form` is react-hook-form's FormProvider — it needs a useForm() instance, and
// FormField wires each control through Controller. This is the enquiry form on
// the Cloudrite contact section.
export const EnquiryForm = () => {
  const form = useForm<Values>({
    defaultValues: { name: 'Jamie Lambert', email: 'jamie@cafe.co.nz', message: '' },
  });
  return (
    <Surface>
      <Form {...form}>
        <form className="flex w-80 flex-col gap-5" onSubmit={(e) => e.preventDefault()}>
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Name</FormLabel>
                <FormControl>
                  <Input {...field} />
                </FormControl>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input type="email" {...field} />
                </FormControl>
                <FormDescription>We reply within one business day.</FormDescription>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="message"
            render={({ field }) => (
              <FormItem>
                <FormLabel>How can we help?</FormLabel>
                <FormControl>
                  <Textarea rows={3} placeholder="Tell us about your setup…" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Send enquiry</Button>
        </form>
      </Form>
    </Surface>
  );
};