// src/components/Button.stories.tsx
import React from "react";
import { Button, ButtonProps } from "../ui/button";
import { StoryFn, Meta } from "@storybook/react";

export default {
  title: "Components/Button",
  component: Button,
  argTypes: {
    onClick: { action: "clicked" },
    variant: { control: "text" },
    size: { control: "text" },
    disable: { control: "boolean" },
  },
} as Meta<typeof Button>;

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

export const Default = Template.bind({});
Default.args = {
  children: "Default Button",
  variant: "primary",
  size: "default",
};

export const Secondary = Template.bind({});
Secondary.args = {
  children: "Secondary Button",
  variant: "secondary",
  size: "default",
};

export const SecondaryGray = Template.bind({});
SecondaryGray.args = {
  children: "SecondaryGray Button",
  variant: "secondary-gray",
  size: "default",
};

export const Tertiary = Template.bind({});
Tertiary.args = {
  children: "Tertiary Button",
  variant: "tertiary",
  size: "default",
};

export const TertiaryGray = Template.bind({});
TertiaryGray.args = {
  children: "TertiaryGray Button",
  variant: "tertiary-gray",
  size: "default",
};

export const Link = Template.bind({});
Link.args = {
  children: "Link Button",
  variant: "link-gray",
  size: "link",
};

export const LinkGray = Template.bind({});
LinkGray.args = {
  children: "LinkGray Button",
  variant: "link-gray",
  size: "link",
};