// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ClickableSpan } from '.';
import { Span } from '../span';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './CLICKABLE_SPAN.mkd';

const ShortName = () => (
  <ClickableSpan onClick={action('onClick')}>
    Something amazing I guess
  </ClickableSpan>
);

storiesOf('Core/Text/ClickableSpan', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <ClickableSpan onClick={action('onClick')}>
        Something amazing I guess
      </ClickableSpan>
    )),
  )
  .add(
    'inline',
    withDocs(docs)(() => (
      <Span>
        Whoa test: <ShortName /> Omg I think it worked:
      </Span>
    )),
  )
  .add(
    'with span props',
    withDocs(docs)(() => (
      <ClickableSpan
        fontSize="f4"
        colorName="brand-primary-base"
        onClick={action('onClick')}
      >
        Something amazing I guess
      </ClickableSpan>
    )),
  );
