import { Dropdown } from './Dropdown';
import { Button } from '../../Atoms/Button/Button';
import { Icon } from '../../Atoms/Icon/Icon';

const dropdownItems = [
  { label: 'Editar', icon: 'Cog6ToothIcon', onClick: () => alert('Editar') },
  { label: 'Duplicar', icon: 'DocumentIcon', onClick: () => alert('Duplicar') },
  { label: 'Compartir', icon: 'UserIcon', onClick: () => alert('Compartir') },
  { label: 'Eliminar', icon: 'XMarkIcon', danger: true, onClick: () => alert('Eliminar') },
];

export default {
  title: 'Layout/Dropdown',
  component: Dropdown,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    items: dropdownItems,
  },
};

export const WithCustomTrigger = {
  args: {
    trigger: (
      <Button variant="outline">
        Opciones <Icon name="ChevronDownIcon" className="ml-2 h-4 w-4" />
      </Button>
    ),
    items: dropdownItems,
  },
};

export const WithDisabledItem = {
  args: {
    items: [
      ...dropdownItems,
      { label: 'Deshabilitado', disabled: true },
    ],
  },
};

export const Simple = {
  args: {
    items: [
      { label: 'Opción 1', onClick: () => alert('Opción 1') },
      { label: 'Opción 2', onClick: () => alert('Opción 2') },
      { label: 'Opción 3', onClick: () => alert('Opción 3') },
    ],
  },
};

