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

const meta = {
  title: "component/Button/TooltipButton",
  component: TooltipButton,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    topTooltip: { control: "text" },
    rightTooltip: { control: "text" },
    bottomTooltip: { control: "text" },
    leftTooltip: { control: "text" },
    iconColor: { control: "color", description: "아이콘" },
    color: { control: "color", description: "tooltip 텍스트" },
    backgroundColor: { control: "color", description: "tooltip 배경" },
  },
  tags: ["autodocs"],
} satisfies Meta<typeof TooltipButton>;

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

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

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

Default.args = {
  topTooltip: "해당 버튼에 대한 추가 설명",
  rightTooltip: "해당 버튼에 대한 추가 설명",
  bottomTooltip: "해당 버튼에 대한 추가 설명",
  leftTooltip: "해당 버튼에 대한 추가 설명",
  icon: <Check />,
};
