"use client";
import { useActionState } from "react";
import { sendEnquiry } from "@/app/(store)/actions";
export default function EnquiryForm({ topic }: { topic?: string }) {
  const [state, action, pending] = useActionState(sendEnquiry, null);
  const e = (k: string) => state?.errors?.[k];
  if (state?.ok) return <p role="status" className="font-display text-[28px]">{state.message}</p>;
  return (
    <form action={action} className="space-y-5">
      <div className="grid sm:grid-cols-2 gap-5">
        <div><label htmlFor="name" className="label">Name</label><input id="name" name="name" required className="field" />{e("name") && <p className="text-rose text-[13px] mt-1">{e("name")}</p>}</div>
        <div><label htmlFor="email" className="label">Email</label><input id="email" name="email" type="email" required className="field" />{e("email") && <p className="text-rose text-[13px] mt-1">{e("email")}</p>}</div>
      </div>
      <div className="grid sm:grid-cols-2 gap-5">
        <div><label htmlFor="phone" className="label">Phone (optional)</label><input id="phone" name="phone" className="field" /></div>
        <div><label htmlFor="topic" className="label">Topic</label><select id="topic" name="topic" defaultValue={topic ?? "Product or sizing"} className="field"><option>Product or sizing</option><option>My order</option><option>Pre-order batch</option><option>Styling enquiry</option><option>Something else</option></select></div>
      </div>
      <div><label htmlFor="message" className="label">Message</label><textarea id="message" name="message" required rows={6} className="field-area" />{e("message") && <p className="text-rose text-[13px] mt-1">{e("message")}</p>}</div>
      {state?.message && !state.ok && <p role="alert" className="text-rose text-[14px]">{state.message}</p>}
      <button className="btn-solid" disabled={pending}>{pending ? "Sending…" : "Send message"}</button>
    </form>
  );
}