import React from 'react';
import { Story, Meta } from '@storybook/react';

import { Breadcrumb, BreadcrumbProps } from '../../../react/src/components/BreadCrumb';


export default {
    title: 'Components/Breadcrumb',
    component: Breadcrumb,
    parameters: {
        layout: 'centered',
        docs: {
            description: {
                story: 'The Breadcrumb component of the DS-TSM Design System is a useful tool for providing hierarchical navigation to users in an application or website. It displays a clear and intuitive navigation trail, allowing users to know which page or section of the application they are on and easily navigate back to previous pages.'
            },
        },
    },
} as Meta;

const Template: Story<BreadcrumbProps> = (args) => <Breadcrumb {...args} />;

export const Default = Template.bind({});
Default.args = {
    items: [
        { label: 'Home', url: '/' },
        { label: 'Products', url: '/' },
        { label: 'Category' },
        { label: 'Product ' },
        { label: 'Checkout', url: '/' },
        { label: 'Payment', url: '/' },
        { label: 'Confirmation', url: '/' },
    ],
};