import React from 'react';
import { storiesOf } from '@storybook/react';
import { Grid } from '~/components/Grid';
import { ButtonSmall } from '~/components/ButtonSmall';
import { ButtonLarge } from '~/components/ButtonLarge';
import { Link } from '~/components/Link';
import { Icon } from '~/components/Icon';
import { SvgPlus } from '~/assets/icons';
import { Button } from '../Button';

storiesOf('Components|Button', module).addWithJSX('Default', () => (
  <Grid justifyItems="center">
    <Button>Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="ghostSecondary">ghostSecondary</Button>
    <Button fluid>Click me</Button>
    <ButtonSmall>ButtonSmall</ButtonSmall>
    <ButtonLarge>ButtonLarge</ButtonLarge>
    <ButtonLarge disabled>Disabled Large</ButtonLarge>
    <Button variant="ghost" iconPosition="left">
      <Icon Asset={SvgPlus} />
      Click me
    </Button>
    <Button as="input" variant="secondary" value="As input" />
    <Button as="a" href="http://www.google.com" variant="ghost">
      As "a" tag
    </Button>
    <Button
      RouterLink={Link}
      fluid
      href="http://www.google.com"
      variant="secondary"
    >
      As Link
    </Button>
  </Grid>
));
