Select

"use client";

import * as React from "react";

import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

/**
 * Live Select example — a styled single-value picker following the WAI-ARIA
 * APG "Select-Only Combobox" pattern. `"use client"` so the demo can echo the
 * committed value; the Select keeps DOM focus on the trigger the whole time
 * and points at the option being explored with `aria-activedescendant`.
 *
 *  - Arrow keys / typeahead move the ACTIVE option only. The value commits on
 *    `Enter` / `Space` / a click / `Tab`; `Escape` closes and keeps the
 *    previous value.
 *  - Arrow keys do NOT wrap at the ends (native `<select>` parity — the
 *    opposite of Dropdown Menu).
 *  - The grouped example ships a disabled option ("Miso") — it is skipped by
 *    arrow keys and typeahead, the way a native `<select>` skips a disabled
 *    `<option>` — and a preselected `defaultValue`.
 */
export function SelectShowcase() {
  const [fruit, setFruit] = React.useState<string>("");

  return (
    <div className="flex max-w-xs flex-col gap-8">
      <section className="flex flex-col gap-1.5">
        <Label id="fruit-label" htmlFor="fruit-trigger">
          Favourite fruit
        </Label>
        <Select value={fruit} onValueChange={setFruit}>
          <SelectTrigger id="fruit-trigger" aria-labelledby="fruit-label">
            <SelectValue placeholder="Pick one…" />
          </SelectTrigger>
          <SelectContent aria-label="Favourite fruit">
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="apricot">Apricot</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="cherry">Cherry</SelectItem>
            <SelectItem value="grapefruit">Grapefruit</SelectItem>
          </SelectContent>
        </Select>
        <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
          {fruit ? `Committed: ${fruit}` : "Nothing committed yet."}
        </p>
      </section>

      <section className="flex flex-col gap-1.5">
        <Label id="soup-label" htmlFor="soup-trigger">
          Soup of the day
        </Label>
        <Select defaultValue="tomato">
          <SelectTrigger id="soup-trigger" aria-labelledby="soup-label">
            <SelectValue placeholder="Choose a soup…" />
          </SelectTrigger>
          <SelectContent aria-label="Soup of the day">
            <SelectGroup aria-labelledby="soup-cold">
              <SelectLabel id="soup-cold">Cold</SelectLabel>
              <SelectItem value="gazpacho">Gazpacho</SelectItem>
              <SelectItem value="vichyssoise">Vichyssoise</SelectItem>
            </SelectGroup>
            <SelectSeparator />
            <SelectGroup aria-labelledby="soup-hot">
              <SelectLabel id="soup-hot">Hot</SelectLabel>
              <SelectItem value="tomato">Tomato</SelectItem>
              <SelectItem value="ramen">Ramen</SelectItem>
              <SelectItem value="miso" disabled>
                Miso (sold out)
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </section>
    </div>
  );
}