import React from "react";
import {
  DestructiveButtonProps,
  DestructiveButton,
} from "../ui/destructive-button";
import { StoryFn, Meta } from "@storybook/react";

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

const Template: StoryFn<DestructiveButtonProps> = (
  args: DestructiveButtonProps
) => <DestructiveButton {...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 Tertiary = Template.bind({});
Tertiary.args = {
  children: "Tertiary Button",
  variant: "tertiary",
  size: "default",
};

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