import React from 'react'
import { storiesOf, action } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import StoryWrapper from 'storybookComponents/StoryWrapper'
import ExploreBox from './index'
import ImageWrapper from './components/Image'
import ContentWrapper from './components/Content'
import ImageUrl from './assets/explore-img.svg'

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

        #### Props:
        ---
        - role: string,
        - className ?: string,
        - title ?: string,
        - textual ?: string,
        - imageUrl ?: string
        - onClick ?: () => {}

      `,
    () => (
      <StoryWrapper>
        <ExploreBox onClick={action('onClick')}>
          <ImageWrapper imageUrl={ImageUrl} />
          <ContentWrapper
            title="Explore the technical whitepaper"
            textual="Get to know the mechanism we use to revolutionize asset trading"
          />
        </ExploreBox>
      </StoryWrapper>
    )
  )
