import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import Button from "../Button";

export default {
  title: "Button",
  component: Button,
  argTypes: {},
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  color: "primary",
  disabled: false,
  text: "Primary",
};

export const Secondary = Template.bind({});
Secondary.args = {
  color: "secondary",
  disabled: false,
  text: "Secondary",
};

export const Disabled = Template.bind({});
Disabled.args = {
  color: "primary",
  disabled: true,
  text: "Disabled",
};

export const Small = Template.bind({});
Small.args = {
  ...Primary.args,
  size: "small",
  text: "Small",
};

export const Medium = Template.bind({});
Medium.args = {
  ...Primary.args,
  size: "medium",
  text: "Medium",
};

export const Large = Template.bind({});
Large.args = {
  ...Primary.args,
  size: "large",
  text: "Large",
};