import * as React from "react"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/registry/ui/select"
import { Label } from "@/registry/ui/label"
import { GlassStage } from "./_shared/glass-stage"

export default function SelectDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {/* Always-visible glass exhibit */}
      <GlassStage>
        {/* static replica of SelectContent material classes — keep in sync */}
        <div className="w-full max-w-[220px] rounded-md border border-material-border bg-material-regular p-1 shadow-xl backdrop-blur-xl">
          <p className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Americas</p>
          <div className="rounded-sm px-2 py-1.5 text-sm bg-accent text-accent-foreground">Eastern Time (EST)</div>
          <div className="rounded-sm px-2 py-1.5 text-sm">Central Time (CST)</div>
          <div className="rounded-sm px-2 py-1.5 text-sm">Mountain Time (MST)</div>
          <div className="rounded-sm px-2 py-1.5 text-sm">Pacific Time (PST)</div>
        </div>
      </GlassStage>

      {/* Interactive demo */}
      <p className="text-xs text-muted-foreground text-center">Try it live</p>
      <div className="flex items-center justify-center">
        <div className="w-full max-w-sm space-y-2">
          <Label htmlFor="demo-timezone">Timezone</Label>
          <Select>
            <SelectTrigger id="demo-timezone" className="w-56">
              <SelectValue placeholder="Select a timezone" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectLabel>Americas</SelectLabel>
                <SelectItem value="est">Eastern Time (EST)</SelectItem>
                <SelectItem value="cst">Central Time (CST)</SelectItem>
                <SelectItem value="mst">Mountain Time (MST)</SelectItem>
                <SelectItem value="pst">Pacific Time (PST)</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  )
}