import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import { ThemeProvider } from "../ThemeProvider";

import Button, { ButtonProps } from "./Button";

export default {
  title: "Components/Input/Button",
  component: Button,
  argTypes: {
    kind: {
      control: {
        type: "radio",
        options: ["primary", "secondary", "minimal"],
      },
    },
    size: {
      control: {
        type: "radio",
        options: ["default", "compact", "large", "mini"],
      },
    },
    shape: {
      control: {
        type: "radio",
        options: ["default", "pill", "round", "circle", "square"],
      },
    },
  },
} as Meta;

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

export const Default = Template.bind({});
Default.args = {
  children: "Add building passport",
  kind: "primary",
  size: "default",
  shape: "pill",
  onClick: () => {
    alert("clicked");
  },
};