import { useState } from "react";
import TabButton, { TabButtonProps } from "./TabButton";
import { Meta, StoryObj } from "@storybook/react";

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

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

export const Default: Story = (args: TabButtonProps) => {
  const [isSelectedIndex, setIsSelectedIndex] = useState<number>();

  const handleOnClick = (index: number) => {
    if (index === isSelectedIndex) setIsSelectedIndex(undefined);
    else setIsSelectedIndex(index);
  };

  return (
    <TabButton
      {...args}
      onClick={handleOnClick}
      isSelectedIndex={isSelectedIndex}
    />
  );
};

Default.args = {
  children: ["BUTTON", "GHOST", "GHOST"],
};
