import React from 'react';
import { Meta, Story } from '@storybook/react';
import { HorizontalTabs, TabsPropsComponentHorizontal, TabComponentHorizontal } from '../../../react/src/components/TabsHorizontal';

export default {
    title: 'Components/Tabs/Horizontal Tabs',
    component: HorizontalTabs,
    argTypes: {},
    parameters: {
        docs: {
            description: {
                story: 'A set of reusable UI elements designed to provide a consistent and user-friendly tabbed interface. With these components, you can easily implement tabbed layouts in your applications, allowing users to switch between different sections or views seamlessly.',
            },
        },
        canvas: {
            height: '230px',
        },
    },
} as Meta;

const Template: Story<TabsPropsComponentHorizontal> = (args) => (
    <div style={{ height: '450px' }}>
        <HorizontalTabs {...args} />
    </div>
);

const tabsData: TabComponentHorizontal[] = [
    {
        label: 'Tab 1',
        content: <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>,
    },
    {
        label: 'Tab 2',
        content: <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>,
    },
    {
        label: 'Tab 3',
        content: <p>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>,
    },
];

export const Default = Template.bind({});
Default.args = {
    tabsHorizontal: tabsData,
};
Default.storyName = 'Default Horizontal Tabs';

export const VerticalTabs = Template.bind({});
VerticalTabs.args = {
    tabsHorizontal: tabsData,
};
VerticalTabs.storyName = 'Vertical Tabs';

export const TabsWithIcons = Template.bind({});
TabsWithIcons.args = {
    tabsHorizontal: [
        {
            label: 'Tab 1',
            icon: <span>😎</span>,
            content: <p>Content for Tab 1 with icon 😎</p>,
        },
        {
            label: 'Tab 2',
            icon: <span>🤓</span>,
            content: <p>Content for Tab 2 with icon 🤓</p>,
        },
        {
            label: 'Tab 3',
            icon: <span>😊</span>,
            content: <p>Content for Tab 3 with icon 😊</p>,
        },
    ],
};
TabsWithIcons.storyName = 'Horizontal Tabs with Icons';

export const ScrollableTabs = Template.bind({});
ScrollableTabs.args = {
    tabsHorizontal: tabsData,
};
ScrollableTabs.storyName = 'Scrollable Horizontal Tabs';