import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import {
  InternalTabs,
  TableTabProps,
} from '../../../components/InternalTabs/InternalTabs';

const meta: Meta = {
  title: 'UI/Tabs/InternalTabs',
  component: InternalTabs,
};

export default meta;

const Template: Story<TableTabProps> = args => (
  <RPGUIRoot>
    <InternalTabs {...args} />
  </RPGUIRoot>
);

export const Default = Template.bind({});

Default.args = {
  tabs: [
    { id: 'tab1', title: 'Tab 1', content: <div>Content for Tab 1</div> },
    { id: 'tab2', title: 'Tab 2', content: <div>Content for Tab 2</div> },
    { id: 'tab3', title: 'Tab 3', content: <div>Content for Tab 3</div> },
    { id: 'tab4', title: 'Tab 4', content: <div>Content for Tab 4</div> },
    { id: 'tab5', title: 'Tab 5', content: <div>Content for Tab 5</div> },
  ],
  activeColor: '#f5f1d5',
  activeTextColor: '#000000',
  inactiveColor: '#6b7280',
  borderColor: '#f59e0b',
  hoverColor: '#fef3c7',
};

export const SingleTab = Template.bind({});
SingleTab.args = {
  tabs: [
    {
      id: 'tab1',
      title: 'Single Tab',
      content: <div>Content for Single Tab</div>,
    },
  ],
  activeColor: '#fff7ed',
  activeTextColor: '#000000',
  inactiveColor: '#6b7280',
  borderColor: '#ea580c',
  hoverColor: '#ffedd5',
};

export const ManyTabs = Template.bind({});
ManyTabs.args = {
  tabs: Array.from({ length: 10 }, (_, i) => ({
    id: `tab${i + 1}`,
    title: `Tab ${i + 1}`,
    content: <div>Content for Tab {i + 1}</div>,
  })),
  activeColor: '#fef08a',
  activeTextColor: '#000000',
  inactiveColor: '#6b7280',
  borderColor: '#f59e0b',
  hoverColor: '#fef3c7',
};
