// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { withDocs } from '../../../../.storybook/with-docs';
import { Button } from '.';
import docs from './BUTTON.mkd';

// Primary

storiesOf('Core/Actions/Button/primary', module)
  .add(
    'sm',
    withDocs(docs)(() => (
      <>
        <Button size="sm" onClick={action('clicked')} spacing="mr1">
          Click me
        </Button>
        <Button size="sm" onClick={action('clicked')} disabled>
          Disabled
        </Button>
      </>
    )),
  )
  .add(
    'md',
    withDocs(docs)(() => (
      <>
        <Button onClick={action('clicked')} size="md" spacing="mr1">
          Click me
        </Button>
        <Button onClick={action('clicked')} size="md" disabled>
          Disabled
        </Button>
      </>
    )),
  )
  .add(
    'link button',
    withDocs(docs)(() => (
      <>
        <Button href="https://google.com" size="md" spacing="mr1">
          {'<a />'} element
        </Button>
        <Button size="md" onClick={action('clicked')}>
          {'<button />'} element
        </Button>
      </>
    )),
  );
