import React from 'react'
import { storiesOf, action } from '@storybook/react'
import { withKnobs, boolean } from '@storybook/addon-knobs'
import StoryWrapper from 'storybookComponents/StoryWrapper'
import TabBox from './index'

storiesOf('Tab box', module)
  .addDecorator(withKnobs)
  .addWithInfo(
    'basic usage',
    `
        This is the basic usage of the Tab Box.

        #### Props:
        ---
        - role: string,
        - className ?: string,
        - isActive ?: boolean,
        - imageURL?: string,
        - title?: string,
        - textual?: string,
        - linkTxt?: string,
        - onClick ?: () => {}

      `,
    () => (
      <StoryWrapper>
        <TabBox isActive="true" onClick={action('onClick')} />
      </StoryWrapper>
    )
  )
  .addWithInfo('with custom options', () => {
    const isActive = boolean('Is Active:', false)

    return (
      <StoryWrapper>
        <TabBox isActive={isActive} />
      </StoryWrapper>
    )
  })
