Menu

"use client";
import { useState } from "react";
import { TrashIcon, EditIcon, MoreHorizontalIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuItem, MenuSeparator, MenuTrigger } from "@/components/ui/component";
export default function MenuOpenADialogDemo() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogAction, setDialogAction] = useState("");
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-black p-8">
      {dialogOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setDialogOpen(false)}>
          <div className="bg-popover border rounded-lg p-6 w-80 shadow-xl" onClick={(e) => e.stopPropagation()}>
            <h2 className="font-semibold text-foreground mb-2">{dialogAction === "delete" ? "Delete item?" : "Rename item"}</h2>
            <p className="text-sm text-muted-foreground mb-4">
              {dialogAction === "delete" ? "This action cannot be undone." : "Enter a new name for this item."}
            </p>
            {dialogAction === "rename" && (
              <input className="w-full border rounded-md px-3 py-2 text-sm bg-background text-foreground mb-4 outline-none focus:ring-2 focus:ring-ring" defaultValue="My Item" />
            )}
            <div className="flex gap-2 justify-end">
              <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
              <Button variant={dialogAction === "delete" ? "default" : "default"} onClick={() => setDialogOpen(false)}>
                {dialogAction === "delete" ? "Delete" : "Save"}
              </Button>
            </div>
          </div>
        </div>
      )}
      <Menu>
        <MenuTrigger render={<Button size="icon" variant="outline"><MoreHorizontalIcon /></Button>} />
        <MenuPopup>
          <MenuItem onSelect={() => { setDialogAction("rename"); setDialogOpen(true); }}>
            <EditIcon />Rename
          </MenuItem>
          <MenuSeparator />
          <MenuItem variant="destructive" onSelect={() => { setDialogAction("delete"); setDialogOpen(true); }}>
            <TrashIcon />Delete
          </MenuItem>
        </MenuPopup>
      </Menu>
    </div>
  );
}