import type { Meta, StoryObj } from '@storybook/vue3';
import MBreadcrumb from './MBreadcrumb.vue';

const meta: Meta<typeof MBreadcrumb> = {
  title: 'Navigation/Breadcrumb',
  component: MBreadcrumb,
  parameters: {
    docs: {
      description: {
        component:
          'A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.',
      },
    },
  },
  args: {
    links: [
      {
        label: 'Home',
        href: '#',
      },
      {
        label: 'level 01',
        href: '#',
      },
      {
        label: 'level 02',
        href: '#',
      },
      {
        label: 'Current Page',
        href: '#',
      },
    ],
  },
  render: (args) => ({
    components: { MBreadcrumb },
    setup() {
      return { args };
    },
    template: `
      <MBreadcrumb v-bind="args"></MBreadcrumb>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MBreadcrumb>;

export const Default: Story = {};

export const Inverse: Story = {
  parameters: {
    backgrounds: {
      default: 'Inverse',
    },
  },
  args: { appearance: 'inverse' },
};