import * as React from "react"
import { LogOutIcon, SettingsIcon, UserIcon } from "lucide-react"
import { Button } from "@/registry/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/registry/ui/dropdown-menu"
import { GlassStage } from "./_shared/glass-stage"

export default function DropdownMenuDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {/* Always-visible glass exhibit */}
      <GlassStage>
        {/* static replica of DropdownMenuContent material classes — keep in sync */}
        <div className="w-full max-w-[160px] 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">My account</p>
          <div className="h-px -mx-1 bg-border" />
          <div className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm">
            <UserIcon className="size-4 text-muted-foreground" />
            Profile
          </div>
          <div className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm">
            <SettingsIcon className="size-4 text-muted-foreground" />
            Settings
          </div>
          <div className="h-px -mx-1 bg-border" />
          <div className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive">
            <LogOutIcon className="size-4" />
            Log out
          </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">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline">Options</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>My account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <UserIcon />
              Profile
            </DropdownMenuItem>
            <DropdownMenuItem>
              <SettingsIcon />
              Settings
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive">
              <LogOutIcon />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}