import IconButton, { IconButtonProps } from "./IconButton";
import { Meta, StoryObj } from "@storybook/react";
import Check from "../../assets/svgs/check.svg";

const meta = {
  title: "component/Button/IconButton",
  component: IconButton,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    borderColor: { control: "color", description: "테두리" },
    backgroundColor: { control: "color", description: "배경" },
    stroke: { control: "color", description: "아이콘" },
  },
  tags: ["autodocs"],
} satisfies Meta<typeof IconButton>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = (args: IconButtonProps) => {
  const handleOnClick = () => {};

  return <IconButton {...args} onClick={handleOnClick} />;
};

Default.args = {
  option: "DEFAULT",
  icon: <Check />,
};

export const Default_Smooth: Story = (args: IconButtonProps) => {
  const handleOnClick = () => {};

  return <IconButton {...args} onClick={handleOnClick} />;
};

Default_Smooth.args = {
  option: "DEFAULT_SMOOTH",
  icon: <Check />,
};

export const Default_Ghost: Story = (args: IconButtonProps) => {
  const handleOnClick = () => {};

  return <IconButton {...args} onClick={handleOnClick} />;
};

Default_Ghost.args = {
  option: "DEFAULT_GHOST",
  icon: <Check />,
};
