Simple Reservation Form

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const PARTY_SIZES = ["1", "2", "3", "4", "5", "6"]

const TIMES = [
  "5:30 PM",
  "6:00 PM",
  "6:30 PM",
  "7:00 PM",
  "7:30 PM",
  "8:00 PM",
  "8:30 PM",
  "9:00 PM",
]

export default function BookingBlock() {
  const [party, setParty] = React.useState("2")
  const [time, setTime] = React.useState("7:30 PM")

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
  }

  return (
    <section className="flex w-full items-center justify-center bg-background px-6 py-16 text-foreground sm:py-24">
      <div className="mx-auto w-full max-w-md">
        <div className="text-center">
          <h2 className="font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl">
            Book A Table
          </h2>
          <p className="mt-4 text-pretty text-muted-foreground">
            Up to six people online. For anything larger, give us a call and we
            will find you the back room.
          </p>
        </div>

        <form
          onSubmit={handleSubmit}
          className="mt-8 flex flex-col gap-4 rounded-xl border border-border bg-card p-6"
        >
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor="booking-1-date">Date</FieldLabel>
              <Input id="booking-1-date" type="date" required />
            </Field>
            <Field>
              <FieldLabel htmlFor="booking-1-party">Party Size</FieldLabel>
              <Select
                value={party}
                onValueChange={(value) => setParty(String(value))}
              >
                <SelectTrigger id="booking-1-party" className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent align="start" alignItemWithTrigger={false}>
                  {PARTY_SIZES.map((size) => (
                    <SelectItem key={size} value={size}>
                      {size}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
          </div>

          <Field>
            <FieldLabel htmlFor="booking-1-time">Time</FieldLabel>
            <Select
              value={time}
              onValueChange={(value) => setTime(String(value))}
            >
              <SelectTrigger id="booking-1-time" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent align="start" alignItemWithTrigger={false}>
                {TIMES.map((slot) => (
                  <SelectItem key={slot} value={slot}>
                    {slot}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </Field>

          <Field>
            <FieldLabel htmlFor="booking-1-name">Name</FieldLabel>
            <Input id="booking-1-name" placeholder="Maya Chen" required />
          </Field>

          <Field>
            <FieldLabel htmlFor="booking-1-email">Email</FieldLabel>
            <Input
              id="booking-1-email"
              type="email"
              placeholder="maya@example.com"
              required
            />
          </Field>

          <Button type="submit" className="mt-2 w-full">
            Request Table
          </Button>
        </form>
      </div>
    </section>
  )
}