import { Meta, StoryObj } from '@storybook/react';
import Tabs from './Tabs';

const meta: Meta<typeof Tabs> = {
  title: 'Components/Tabs',
  component: Tabs,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof Tabs>;

export const Default: Story = {
  args: {
    tabs: [
      {
        id: '1',
        label: 'Tab 1',
        iconName: 'home',
        iconText: 'both',
        component: <div>Content for Tab 1</div>,
      },
      {
        id: '2',
        label: 'Tab 2',
        iconName: 'settings',
        iconText: 'icon',
        component: <div>Content for Tab 2</div>,
        submenu: (
          <ul>
            <li>Submenu Item 1</li>
            <li>Submenu Item 2</li>
            <li>Submenu Item 3</li>
            <li>Submenu Item 4</li>
          </ul>
        ),
      },
      {
        id: '3',
        label: 'Tab 3',
        iconText: 'text',
        component: <div>Content for Tab 3</div>,
        disabled: true,
      },
      {
        id: '4',
        label: 'Tab 4',
        iconText: 'both',
        component: <div>Content for Tab 4</div>,
      },
    ],
  },
};

export const WithDisabledTab: Story = {
  args: {
    tabs: [
      {
        id: '1',
        label: 'Tab 1',
        iconName: 'home',
        iconText: 'both',
        component: <div>Content for Tab 1</div>,
      },
      {
        id: '2',
        label: 'Tab 2',
        iconName: 'settings',
        iconText: 'icon',
        component: <div>Content for Tab 2</div>,
        submenu: (
          <ul>
            <li>Submenu Item 1</li>
            <li>Submenu Item 2</li>
            <li>Submenu Item 3</li>
            <li>Submenu Item 4</li>
          </ul>
        ),
      },
      {
        id: '3',
        label: 'Tab 3',
        iconText: 'text',
        component: <div>Content for Tab 3</div>,
        disabled: true,
      },
      {
        id: '4',
        label: 'Tab 4',
        iconText: 'both',
        component: <div>Content for Tab 4</div>,
      },
    ],
  },
};

export const NoTabs: Story = {
  args: {
    tabs: [],
  },
};