import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { MainButton } from "./MainButton";
import { fn } from "storybook/test";
import { useState } from "react";

/** Reusable MainButton Component */
const meta: Meta<typeof MainButton> = {
  title: "UI/MainButton",
  component: MainButton,
  tags: ["autodocs"],
  args: {
    disabled: false,
    children: "Title",
    onClick: fn(),
  },
  argTypes: {
    active: {
      control: { type: "boolean" },
    },
  },
  render: (args) => {
    const [active, setActive] = useState(args.active);
    return (
      <MainButton
        {...args}
        onClick={() => setActive((prev) => !prev)}
        active={active}
      />
    );
  },
};

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

export const Default = {} satisfies Story;

export const WithEmoji = {
  args: {
    emoji: "🩷️",
  },
} satisfies Story;

export const WithCheckbox = {
  args: {
    isCheckbox: true,
    checkboxProps: {
      onCheckedChange: fn(),
    },
  },
} satisfies Story;

export const WithCheckboxAndEmoji = {
  args: {
    isCheckbox: true,
    emoji: "🩷️",
    checkboxProps: {
      onCheckedChange: fn(),
    },
  },
} satisfies Story;