import Button, { ButtonProps } from "./Button";
import { Meta, StoryObj } from "@storybook/react";
import Check from "../../assets/svgs/check.svg";
import Eye from "../../assets/svgs/eye.svg";

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

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

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

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

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

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

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

Default_Smooth.args = {
  option: "DEFAULT_SMOOTH",
  children: "BUTTON",
};

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

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

Default_Ghost.args = {
  option: "DEFAULT_GHOST",
  children: "BUTTON",
};

export const Error: Story = (args: ButtonProps) => {
  const handleOnClick = () => {};

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

Error.args = {
  option: "ERROR",
  children: "BUTTON",
  isError: true,
};

export const Error_Smooth: Story = (args: ButtonProps) => {
  const handleOnClick = () => {};

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

Error_Smooth.args = {
  option: "ERROR_SMOOTH",
  children: "BUTTON",
  rightIcon: <Eye />,
};

export const Error_Ghost: Story = (args: ButtonProps) => {
  const handleOnClick = () => {};

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

Error_Ghost.args = {
  option: "ERROR_GHOST",
  children: "BUTTON",
};
