import type { Meta, StoryObj } from '@storybook/react-vite';
import { Settings, Trash2, ExternalLink } from 'lucide-react';
import { Button } from '../../src/ui/Button/Button';
import { ContextMenu } from '../../src/ui/ContextMenu/ContextMenu';

const meta: Meta<typeof ContextMenu> = {
  title: 'UI/ContextMenu',
  component: ContextMenu,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof ContextMenu>;

const trigger = (
  <Button variant="ghost" size="sm">
    <Settings size={16} />
  </Button>
);

export const Default: Story = {
  args: {
    trigger,
    items: [
      { label: 'View details', icon: <ExternalLink size={14} />, onClick: () => {} },
      { label: 'Delete', icon: <Trash2 size={14} />, variant: 'danger', onClick: () => {} },
    ],
  },
};

export const AlignLeft: Story = {
  args: {
    trigger,
    align: 'left',
    items: [
      { label: 'View details', icon: <ExternalLink size={14} />, onClick: () => {} },
      { label: 'Delete', icon: <Trash2 size={14} />, variant: 'danger', onClick: () => {} },
    ],
  },
};

export const ManyItems: Story = {
  args: {
    trigger,
    items: [
      { label: 'View details', icon: <ExternalLink size={14} />, onClick: () => {} },
      { label: 'Edit', icon: <Settings size={14} />, onClick: () => {} },
      { label: 'Duplicate', onClick: () => {} },
      { label: 'Delete', icon: <Trash2 size={14} />, variant: 'danger', onClick: () => {} },
    ],
  },
};