Sentence Form: Event RSVP

"use client";

import { SentenceForm, SentenceFormField } from "@/components/ui/sentence-form";

// Stands in for a real request.
const send = () => new Promise<void>((resolve) => setTimeout(resolve, 1000));

export function SentenceFormRsvpDemo() {
  return (
    <section className="w-full max-w-xl rounded-3xl bg-[#fff7f2] px-6 py-8 text-[#3b1d14] ring-1 ring-[#3b1d14]/10 sm:px-10 sm:py-10 dark:bg-[#1c1311] dark:text-[#f6e7df] dark:ring-white/10">
      <header className="border-b border-current/15 pb-5">
        <p className="font-mono text-[11px] tracking-[0.16em] uppercase opacity-60">Thursday 19 June · 7 pm</p>
        <h3 className="mt-2 font-serif text-2xl italic">Midsummer supper at the studio</h3>
      </header>

      <SentenceForm
        onSubmit={send}
        className="mt-6 min-h-[32rem] font-serif text-[22px] leading-[1.5] sm:min-h-[21rem] sm:text-[26px]"
        submitLabel="RSVP"
        submitClassName="data-[ready=true]:bg-[#3b1d14] data-[ready=true]:text-[#fff7f2] dark:data-[ready=true]:bg-[#f6e7df] dark:data-[ready=true]:text-[#1c1311]"
        success={({ values, edit }) => (
          <p className="text-pretty opacity-80">
            See you on the 19th
            {values.party === "with a guest" && values.guest ? <>, and {values.guest} too</> : null}. Details are on
            their way.{" "}
            <button
              type="button"
              onClick={edit}
              className="cursor-pointer rounded-sm font-medium underline decoration-current/30 underline-offset-4 outline-none hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
            >
              Change my reply
            </button>
          </p>
        )}
      >
        {(values) => (
          <>
            Count me in. I&apos;m{" "}
            <SentenceFormField name="name" label="Your name" placeholder="your name" autoComplete="name" required />,
            and I&apos;m coming{" "}
            <SentenceFormField
              name="party"
              label="Coming"
              placeholder="with whom"
              options={["on my own", "with a guest"]}
              required
            />
            {values.party === "with a guest" ? (
              <>
                {" "}
                named{" "}
                <SentenceFormField name="guest" label="Guest's name" placeholder="their name" required />
              </>
            ) : null}
            . I&apos;ll have the{" "}
            <SentenceFormField
              name="menu"
              label="Dinner"
              options={["roast chicken", "wild mushroom risotto", "grilled sea bass"]}
              defaultValue="wild mushroom risotto"
            />
            . Send the details to{" "}
            <SentenceFormField
              name="email"
              label="Email"
              placeholder="you@email.com"
              type="email"
              autoComplete="email"
              required
            />
            .
          </>
        )}
      </SentenceForm>
    </section>
  );
}