import { Meta, Story } from '@storybook/react';
import React from 'react';
import {
  ITabsContainer,
  MultitabType,
  RPGUIRoot,
  TabBody,
  TabsContainer,
} from '../../..';

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

export default meta;

const Template: Story<ITabsContainer> = args => (
  <RPGUIRoot>
    <TabsContainer {...args}>
      <TabBody id="animal">
        <p>Animals content here</p>
      </TabBody>
      <TabBody id="plant">
        <p>Plant content here</p>
      </TabBody>
    </TabsContainer>
  </RPGUIRoot>
);

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

Brown.args = {
  type: MultitabType.Brown,
  onCloseButton: () => console.log('close tab'),
  tabs: [
    { label: 'Animal', id: 'animal' },
    { label: 'Plant', id: 'plant' },
  ],
};

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

Gray.args = {
  type: MultitabType.Gray,
  onCloseButton: () => console.log('close tab'),
  tabs: [
    { label: 'Animal', id: 'animal' },
    { label: 'Plant', id: 'plant' },
  ],
};
