components/halves/ReservationForm.tsx

"use client";

import { FormEvent, useState } from "react";
import { Button } from "./Button";
import { Field, SelectField } from "./Field";

export function ReservationForm({ compact = false }: { compact?: boolean }) {
  const [submitted, setSubmitted] = useState(false);

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitted(true);
  }

  if (submitted) {
    return (
      <div className="reservation-success" role="status">
        <strong>Place noted.</strong>
        <span>We will write when the next drop opens.</span>
      </div>
    );
  }

  return (
    <form className={`reservation-form ${compact ? "is-compact" : ""}`} onSubmit={submit}>
      <Field label="Email address" type="email" placeholder="you@example.com" required />
      {!compact ? (
        <>
          <Field
            label="US ZIP"
            inputMode="numeric"
            pattern="[0-9]{5}"
            placeholder="10001"
            required
          />
          <SelectField
            label="What should we pour?"
            options={[
              { label: "A mixed case", value: "mixed" },
              { label: "Mostly red", value: "red" },
              { label: "Mostly white", value: "white" },
            ]}
          />
        </>
      ) : null}
      <Button type="submit">Join Drop 04</Button>
      <p>No charge today. One note when the case opens.</p>
    </form>
  );
}