import React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { Tabs, IPropsTabs } from '.';

const css = styled.div;

const Style = css`
   background: white !important;

   .max-width-120 {
      max-width: 120px;
      overflow: auto;
      padding: 10px 20px;
   }
`;

const data: IPropsTabs = {
   options: [
      {
         id: 1,
         name: 'AAA',
      },
      {
         id: 2,
         name: 'BBB',
      },
      {
         id: 3,
         name: 'CCC',
      },
      {
         id: 4,
         name: 'DDD',
      },
   ],
   onSelect: (tab) => {
      // console.log(tab);
   },
};

storiesOf('Components/Tabs', module)
   .add('with basic data', () => {
      return (
         <Style>
            <Tabs {...data} />
         </Style>
      );
   })
   .add('with skeleton', () => {
      return (
         <Style>
            <Tabs {...data} skeleton />
         </Style>
      );
   })
   .add('with scroll', () => {
      return (
         <Style>
            <div className="max-width-120">
               <Tabs {...data} />
            </div>
         </Style>
      );
   })
   .add('with defaultTab', () => {
      return (
         <Style>
            <Tabs {...data} defaultTab={3} />
         </Style>
      );
   });
