// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../../.storybook/config-docs';
import { SecondaryButton } from '.';
import docs from './SECONDARY_BUTTON.mkd';

storiesOf('Core/Actions/Button/secondary', module)
  .addDecorator(withInfo(configDocs(docs, SecondaryButton)))
  .add('button', () => (
    <>
      <SecondaryButton onClick={action('clicked')} spacing="mr1">
        Click me
      </SecondaryButton>
      <SecondaryButton onClick={action('clicked')} disabled>
        Disabled
      </SecondaryButton>
    </>
  ))
  .add('link button', () => (
    <>
      <SecondaryButton href="https://google.com" spacing="mr1">
        {'<a />'} element
      </SecondaryButton>
      <SecondaryButton onClick={action('clicked')}>
        {'<button />'} element
      </SecondaryButton>
    </>
  ));
