import { Button } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A base button component for functional actions. Its appearance and behavior can be customized based on the parent component's context using className. This component provides loading and disabled states, but styling is left to the consumer.",
      },
    },
  },
  argTypes: {
    disabled: {
      control: { type: "boolean" },
      description: "Disable the button",
    },
    children: {
      control: { type: "text" },
      description: "Button content",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes for custom styling",
    },
  },
  args: {
    children: "Button",
    disabled: false,
  },
};

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

// Default button
export const Default: Story = {
  args: {},
};

// Disabled button
export const Disabled: Story = {
  args: {
    disabled: true,
    children: "Disabled Button",
  },
};

// With custom styling
export const WithCustomStyling: Story = {
  args: {
    className: "btn-medium bg-fill-brand text-inverse rounded px-4 py-2",
    children: "Custom Styled Button",
  },
  parameters: {
    docs: {
      description: {
        story:
          "The Button component accepts className for custom styling. Use Tailwind classes or your own CSS to style the button as needed.",
      },
    },
  },
};

// Styling examples
export const StylingExamples: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <p className="mb-2 text-sm text-gray-600">
          Examples of how you can style the Button component using className:
        </p>
        <div className="flex flex-wrap gap-2">
          <Button className="bg-fill-brand text-inverse btn-medium">
            Brand Button
          </Button>
          <Button className="bg-surface-secondary text-default btn-medium">
            Secondary Button
          </Button>
          <Button className="border-border-default text-default btn-medium border">
            Outline Button
          </Button>
          <Button className="bg-fill-brand text-inverse btn-small">
            Small Button
          </Button>
          <Button className="bg-fill-brand text-inverse btn-large">
            Large Button
          </Button>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Styling examples showing how to use className to customize the button appearance. These are examples only - the component itself doesn't provide built-in variants.",
      },
    },
  },
};