import React from 'react';
import {storiesOf} from '@storybook/react';
import {text, object} from '@storybook/addon-knobs';
import Tabs, {VIEW_TYPE} from '../../Components/Tabs';

const baseTabs = [
  {
    id: 'withdraw',
    label: 'Withdraw',
  },
  {
    id: 'billing-settings',
    label: 'Billing settings',
  },
  {
    id: 'payouts',
    label: 'Payouts',
  },
];

export default storiesOf('Components | Tabs', module)
  .add('Default', () => (
    <Tabs
      tabs={object('Tabs', baseTabs)}
      defaultActiveTabId={text('Default active tab id', 'withdraw')}
      primaryColor={text('Primary color (hex, hsl, gradient, etc)', '')}
    />
  ))
  .add('Rounded', () => (
    <Tabs
      tabs={object('Tabs', baseTabs)}
      viewType={VIEW_TYPE.ROUNDED}
      defaultActiveTabId={text('Default active tab id', 'withdraw')}
      primaryColor={text('Primary color (hex, hsl, gradient, etc)', '')}
    />
  ));