import BmsMenu from '@/components/navigation/BmsMenu.vue';
import { Activity } from 'lucide-vue-next';

export default {
  title: 'Composants/navigation/Menu',
  component: BmsMenu,
  argTypes: {
    items: {},
  },
};

const Template = (args) => ({
  components: {
    BmsMenu,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsMenu v-bind="args">
      <template v-if="args.additional" #additional>{{args.additional}}</template>
      <template v-if="args.footer" #footer>{{args.footer}}</template>
    </BmsMenu>
  `,
});

export const Closed = Template.bind({});
Closed.args = {
  items: [
    {
      label: 'label',
      link: 'link',
    },
  ],
};

export const Opened = Template.bind({});
Opened.args = {
  open: true,
  items: [
    {
      label: 'toto',
      link: '/toto',
      icon: Activity,
    },
    {
      label: 'titi',
      link: '/titi',
    },
  ],
  activeLink: '/toto',
};

export const WithFooterSlot = Template.bind({});
WithFooterSlot.args = {
  open: true,
  items: [
    {
      label: 'toto',
      link: '/toto',
      icon: Activity,
    },
    {
      label: 'titi',
      link: '/titi',
    },
    {
      label: 'Parent',
      items: [
        {
          label: 'tata',
          link: '/tata',
          icon: Activity,
        },
        {
          label: 'tutu',
          link: '/tutu',
        },
      ],
    },
  ],
  activeLink: '/tutu',
  additional: 'Additional',
  footer: 'Footer',
};
