import React, { useEffect, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '.';

storiesOf('Components/Button', module)
   .add('colors', () => {
      return (
         <>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="success">Success</Button>
            <Button variant="warning">Warning</Button>
            <Button variant="danger">Danger</Button>
            <Button variant="info">Info</Button>
            <Button variant="light">Light</Button>
            <Button variant="dark">Dark</Button>
            <Button variant="link">Link</Button>
         </>
      );
   })
   .add('outline', () => {
      return (
         <>
            <Button outline variant="primary">
               Primary
            </Button>
            <Button outline variant="secondary">
               Secondary
            </Button>
            <Button outline variant="success">
               Success
            </Button>
            <Button outline variant="warning">
               Warning
            </Button>
            <Button outline variant="danger">
               Danger
            </Button>
            <Button outline variant="info">
               Info
            </Button>
            <Button outline variant="light">
               Light
            </Button>
            <Button outline variant="dark">
               Dark
            </Button>
            <Button outline variant="link">
               Link
            </Button>
         </>
      );
   })
   .add('size', () => {
      return (
         <>
            <Button size="sm">Small</Button>
            <Button size="md">Medium</Button>
            <Button size="lg">Large</Button>
         </>
      );
   });
