import BmsBreadcrumb from './BmsBreadcrumb.vue';
import { vueRouter } from 'storybook-vue3-router';
import { Heart } from 'lucide-vue-next';

export default {
  title: 'composants/navigation/Breadcrumb',
  component: BmsBreadcrumb,
  decorators: [
    vueRouter([
      {
        name: 'home',
        path: '/',
      },
      {
        name: 'firstRoute',
        path: '/toto',
      },
      {
        name: 'secondRoute',
        path: '/titi',
      },
      {
        name: 'thirdRoute',
        path: '/tutu',
      },
    ]),
  ],
};

const Template = (args) => ({
  components: {
    BmsBreadcrumb,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsBreadcrumb v-bind="args" />
  `,
});

export const Empty = Template.bind({});
Empty.args = {
  breadcrumbs: [],
};

export const Default = Template.bind({});
Default.args = {
  breadcrumbs: [
    {
      to: { name: 'firstRoute' },
      label: 'First route',
    },
    {
      to: { name: 'secondRoute' },
      label: 'Second route',
    },
    {
      label: 'Third and final route',
    },
  ],
};
