import { MenuAcciones } from './MenuAcciones';

export default {
  title: 'Layout/MenuAcciones',
  component: MenuAcciones,
  parameters: {
    layout: 'centered',
  },
  args: {
    ariaLabel: 'Acciones',
    menuWidth: 140,
  },
};

const renderInCell = (args) => (
  <div
    style={{
      width: 320,
      height: 120,
      border: '1px solid #E5E7EB',
      borderRadius: 8,
      padding: 16,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      boxSizing: 'border-box',
      background: '#FFFFFF',
    }}
  >
    <MenuAcciones {...args} />
  </div>
);

export const BasicoDosAcciones = {
  render: renderInCell,
  args: {
    menuWidth: 116,
    actions: [
      {
        key: 'edit',
        icon: 'PencilSquareIcon',
        label: 'Editar',
        onClick: () => console.log('Editar'),
      },
      {
        key: 'delete',
        icon: 'TrashIcon',
        label: 'Eliminar',
        onClick: () => console.log('Eliminar'),
      },
    ],
  },
};

export const ConTresAcciones = {
  render: renderInCell,
  args: {
    menuWidth: 140,
    actions: [
      {
        key: 'edit',
        icon: 'PencilSquareIcon',
        label: 'Editar',
        onClick: () => console.log('Editar'),
      },
      {
        key: 'archive',
        icon: 'ArchiveBoxIcon',
        label: 'Archivar',
        onClick: () => console.log('Archivar'),
      },
      {
        key: 'delete',
        icon: 'TrashIcon',
        label: 'Eliminar',
        onClick: () => console.log('Eliminar'),
      },
    ],
  },
};
