import React from 'react';
import { storiesOf } from '@storybook/react';
import { text, select, boolean } from '@storybook/addon-knobs';
import Button from '../../src/lib/Button/Button';

const stories = storiesOf('Button', module);

const themeOptions = {
  primary: 'primary',
  default: 'default',
  bright: 'bright',
  dark: 'dark',
  success: 'success',
  warn: 'warn',
  transparent: 'transparent'
};

const sizeOptions = {
  md: 'md',
  lg: 'lg'
};

const component = () => (
  <Button
    stretch={boolean('Stretch')}
    flat={boolean('Flat')}
    rounded={boolean('Rounded')}
    disabled={boolean('Disabled')}
    theme={select('Theme', themeOptions)}
    size={select('Size', sizeOptions, 'md')}
  >
    {text('Children', 'Insert your label...')}
  </Button>
);

stories.addWithJSX('Component', component);