import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { Button } from "./button";
import Link from "next/link";
import { fn } from "storybook/test";

/** Reusable Button Component */
const meta: Meta<typeof Button> = {
  title: "Shadcn UI/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {
    disabled: false,
    asChild: false,
    onClick: fn(),
  },
  argTypes: {
    asChild: {
      control: { type: "boolean" },
    },
  },
};

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

export const Default = {
  args: {
    children: "Button",
  },
} satisfies Story;

export const Disabled = {
  args: {
    children: "Disabled",
    disabled: true,
  },
} satisfies Story;

export const AsChild = {
  args: {
    asChild: true,
    children: <Link href="#test">Link Button</Link>,
  },
} satisfies Story;

export const CustomStyles = {
  args: {
    children: "Custom Styled",
    className:
      "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 shadow-lg",
  },
} satisfies Story;
