import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Button from './button';
import MicroButton from './microButton';

storiesOf('Buttons|Primary Button', module)
  .add('Primary', () => (
    <Button primary onClick={action('click')}>
      Primary
    </Button>
  ))
  .add('Primary Disabled', () => (
    <Button primary disabled onClick={action('click')}>
      Primary
    </Button>
  ))
  .add('Primary Outlined', () => (
    <Button primary outline onClick={action('click')}>
      Primary
    </Button>
  ))
  .add('Primary Small', () => (
    <Button small primary onClick={action('click')}>
      Primary
    </Button>
  ))
  .add('Primary Outlined Small', () => (
    <Button small primary outline onClick={action('click')}>
      Primary
    </Button>
  ));

storiesOf('Buttons|Secondary Button', module)
  .add('Secondary', () => <Button secondary onClick={action('click')}>Secondary</Button>)
  .add('Secondary Disabled', () => (
    <Button secondary disabled onClick={action('click')}>
      Secondary
    </Button>
  ))
  .add('Secondary Outlined', () => (
    <Button secondary outline onClick={action('click')}>
      Secondary
    </Button>
  ))
  .add('Secondary Small', () => (
    <Button secondary small onClick={action('click')}>
      Secondary
    </Button>
  ))
  .add('Secondary Outlined Small', () => (
    <Button secondary small outline onClick={action('click')}>
      Secondary
    </Button>
  ));

storiesOf('Buttons|Tertiaty Button', module)
  .add('Tertiaty', () => <Button onClick={action('click')}>Tertiaty</Button>)
  .add('Tertiaty disabled', () => (
    <Button disabled onClick={action('click')}>
      Tertiaty
    </Button>
  ))
  .add('Tertiaty Small', () => (
    <Button small onClick={action('click')}>
      Tertiaty
    </Button>
  ));

storiesOf('Buttons|Micro Button', module)
  .add('With label', () => (
    <MicroButton icon="share" label="SHARE" onClick={action('click')} />
  ))
  .add('Without label', () => (
    <MicroButton icon="search" onClick={action('click')} />
  ));
