Dropdown Menu

"use client";

import * as React from "react";
import { Copy, Pencil, Share2, Trash2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

/**
 * Live Dropdown Menu example — a button that opens a menu of commands
 * (WAI-ARIA APG "Menu Button"). `"use client"` so the demo can show which
 * command was last chosen; the menu itself manages its own open state, roving
 * arrow-key focus (wrapping), typeahead, and `Escape` / outside-click / Tab
 * dismissal.
 *
 *  - Opening from the keyboard (`Enter` / `Space` / `ArrowDown`) moves focus to
 *    the first item; `ArrowUp` opens onto the last.
 *  - "Move" is disabled: it stays in the arrow-key rotation and is focusable,
 *    it just does nothing on activation (`aria-disabled`) — the deliberate
 *    contrast with Select, which skips its disabled options.
 *  - Every command runs its `onSelect`, then the menu closes and focus returns
 *    to the trigger.
 */
export function DropdownMenuShowcase() {
  const [lastAction, setLastAction] = React.useState<string | null>(null);

  return (
    <div className="flex flex-col gap-6">
      <DropdownMenu>
        <DropdownMenuTrigger>
          <Button variant="outline">Actions</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel id="dm-file-actions">File</DropdownMenuLabel>
          <DropdownMenuGroup aria-labelledby="dm-file-actions">
            <DropdownMenuItem onSelect={() => setLastAction("Rename")}>
              <Pencil aria-hidden="true" />
              Rename
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => setLastAction("Duplicate")}>
              <Copy aria-hidden="true" />
              Duplicate
            </DropdownMenuItem>
            <DropdownMenuItem disabled onSelect={() => setLastAction("Move")}>
              <Share2 aria-hidden="true" />
              Move…
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onSelect={() => setLastAction("Delete")}
            className="text-destructive focus:bg-destructive-subtle focus:text-destructive-subtle-foreground"
          >
            <Trash2 aria-hidden="true" />
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
        {lastAction ? `Last action: ${lastAction}` : "No action chosen yet."}
      </p>
    </div>
  );
}