import type { Meta, StoryObj } from "@storybook/react";
import { Menu, ContextMenu, Button } from "@managemate/react";

const meta = {
  title: "Overlays/Menu",
  component: Menu,
  tags: ["autodocs"],
} satisfies Meta<typeof Menu>;

export default meta;
type Story = StoryObj<typeof meta>;

const items = [
  { label: "Voir le détail", icon: "eye-line" as const, shortcut: "↵" },
  { label: "Modifier", icon: "edit-line" as const, shortcut: "E" },
  { label: "Dupliquer", icon: "file-copy-line" as const, shortcut: "⌘D" },
  { type: "divider" } as const,
  { type: "label", label: "Visibilité" } as const,
  { label: "Partager", icon: "share-line" as const },
  { label: "Archiver", icon: "inbox-line" as const },
  { type: "divider" } as const,
  { label: "Supprimer", icon: "delete-bin-line" as const, danger: true, shortcut: "⌫" },
];

export const Default: Story = {
  render: () => (
    <Menu trigger={<Button variant="tertiary" icon="more-2-line">Actions</Button>} items={items} />
  ),
};

export const Context: Story = {
  name: "ContextMenu — clic droit",
  render: () => (
    <ContextMenu items={items}>
      <div style={{
        display: "grid", placeItems: "center", height: 140,
        border: "2px dashed var(--mmg-color-border)", borderRadius: "var(--mmg-radius-md)",
        color: "var(--mmg-color-text-tertiary)", cursor: "context-menu",
      }}>
        Clic droit ici
      </div>
    </ContextMenu>
  ),
};