import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { Button } from "./Button";
import { PlayIcon, HomeIcon } from "@heroicons/react/24/outline";

const meta = {
  title: "UI/Button",
  component: Button,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component: "A versatile button component with multiple variants, sizes, and accessibility features.",
      },
    },
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["primary", "secondary", "outline", "ghost", "danger"],
      description: "Visual style variant of the button",
    },
    size: {
      control: { type: "select" },
      options: ["sm", "md", "lg"],
      description: "Size of the button",
    },
    loading: {
      control: { type: "boolean" },
      description: "Shows loading spinner when true",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disables the button when true",
    },
    fullWidth: {
      control: { type: "boolean" },
      description: "Makes button full width of container",
    },
    children: {
      control: { type: "text" },
      description: "Button content",
    },
  },
  args: { 
    onClick: fn(),
    children: "Button",
  },
} satisfies Meta<typeof Button>;

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

export const Primary: Story = {
  args: {
    variant: "primary",
    children: "Primary Button",
  },
};

export const Secondary: Story = {
  args: {
    variant: "secondary",
    children: "Secondary Button",
  },
};

export const Outline: Story = {
  args: {
    variant: "outline",
    children: "Outline Button",
  },
};

export const Ghost: Story = {
  args: {
    variant: "ghost",
    children: "Ghost Button",
  },
};

export const Danger: Story = {
  args: {
    variant: "danger",
    children: "Danger Button",
  },
};

export const Small: Story = {
  args: {
    size: "sm",
    children: "Small Button",
  },
};

export const Medium: Story = {
  args: {
    size: "md",
    children: "Medium Button",
  },
};

export const Large: Story = {
  args: {
    size: "lg",
    children: "Large Button",
  },
};

export const Loading: Story = {
  args: {
    loading: true,
    children: "Loading...",
  },
};

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

export const FullWidth: Story = {
  args: {
    fullWidth: true,
    children: "Full Width Button",
  },
  parameters: {
    layout: "padded",
  },
};

export const WithLeftIcon: Story = {
  args: {
    leftIcon: <PlayIcon className="w-4 h-4" />,
    children: "Play Video",
  },
};

export const WithRightIcon: Story = {
  args: {
    rightIcon: <HomeIcon className="w-4 h-4" />,
    children: "Go Home",
  },
};

export const WithBothIcons: Story = {
  args: {
    leftIcon: <PlayIcon className="w-4 h-4" />,
    rightIcon: <HomeIcon className="w-4 h-4" />,
    children: "Both Icons",
  },
};

export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="flex gap-2 flex-wrap">
        <Button variant="primary">Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="danger">Danger</Button>
      </div>
      <div className="flex gap-2 flex-wrap">
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
      </div>
      <div className="flex gap-2 flex-wrap">
        <Button loading>Loading</Button>
        <Button disabled>Disabled</Button>
        <Button leftIcon={<PlayIcon className="w-4 h-4" />}>With Icon</Button>
      </div>
    </div>
  ),
  parameters: {
    layout: "padded",
  },
};