import React, { ReactChild } from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';
import { Button, ButtonProps } from '.';

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    onClick: { action: 'clicked' },
  },
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = { children: 'Submit' } as ButtonProps & {
  children?: ReactChild;
};

export const Variants = () => (
  <>
    <Button variant="primary">primary</Button>
    <Button variant="secondary">secondary</Button>
    <Button variant="ghost">ghost</Button>
    <Button variant="ghostSecondary">ghostSecondary</Button>
    <Button variant="raw">raw</Button>
    <Button variant="light">light</Button>
    <Button variant="gray">Gray</Button>
  </>
);
