"use client";

import Link from "next/link";

import { ContactTurnstile } from "@/components/site/contact-turnstile";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import type { PublicContactProtectionSettings } from "@/lib/contact-protection";

type ContactFormCopy = {
  name: string;
  email: string;
  phone: string;
  company: string;
  message: string;
  note: string;
  submit: string;
  preview: string;
};

type ContactFormProps = {
  action: (formData: FormData) => Promise<void>;
  locale: string;
  previewHref: string;
  copy: ContactFormCopy;
  protection: PublicContactProtectionSettings;
};

export function ContactForm({
  action,
  locale,
  previewHref,
  copy,
  protection,
}: ContactFormProps) {
  return (
    <form action={action} className="grid gap-5">
      <input type="hidden" name="locale" value={locale} />

      <div className="grid gap-4 md:grid-cols-2">
        <Label className="grid gap-2">
          {copy.name}
          <Input type="text" name="name" placeholder={copy.name} required />
        </Label>

        <Label className="grid gap-2">
          {copy.email}
          <Input type="email" name="email" placeholder={copy.email} required />
        </Label>

        <Label className="grid gap-2">
          {copy.phone}
          <Input type="tel" name="phone" placeholder={copy.phone} />
        </Label>

        <Label className="grid gap-2">
          {copy.company}
          <Input type="text" name="company" placeholder={copy.company} />
        </Label>
      </div>

      <Label className="grid gap-2">
        {copy.message}
        <Textarea rows={7} name="message" placeholder={copy.message} required minLength={10} />
      </Label>

      <p className="text-sm text-muted-foreground">{copy.note}</p>

      {protection.turnstile.enabled ? (
        <ContactTurnstile siteKey={protection.turnstile.siteKey} />
      ) : null}

      <div className="flex flex-wrap gap-3">
        <Button type="submit">{copy.submit}</Button>
        <Button asChild variant="outline">
          <Link href={previewHref}>{copy.preview}</Link>
        </Button>
      </div>
    </form>
  );
}