import type { Meta, StoryObj } from "@storybook/preact";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  title: "Primitives/Button", component: Button,
  argTypes: {
    variant: { control: "radio", options: ["filled", "outlined", "ghost"] },
    size: { control: "radio", options: ["sm", "md", "lg"] },
  },
};
export default meta;
type Story = StoryObj<typeof Button>;

export const Filled: Story = { args: { label: "Save Changes", variant: "filled" } };
export const Outlined: Story = { args: { label: "Cancel", variant: "outlined" } };
export const Ghost: Story = { args: { label: "Learn more", variant: "ghost" } };
export const WithIcon: Story = { args: { label: "Add Record", variant: "filled", icon: "+" } };
export const Small: Story = { args: { label: "Edit", variant: "outlined", size: "sm" } };
export const Large: Story = { args: { label: "Get Started", variant: "filled", size: "lg" } };
export const FullWidth: Story = { args: { label: "Submit", variant: "filled", fullWidth: true } };
export const Danger: Story = { args: { label: "Delete", variant: "outlined", danger: true, icon: "✕" } };
export const AllVariants: Story = {
  render: () => (
    <div class="flex flex-wrap gap-2">
      <Button label="Filled" variant="filled" />
      <Button label="Outlined" variant="outlined" />
      <Button label="Ghost" variant="ghost" />
      <Button label="Icon" variant="filled" icon="🚀" />
      <Button label="Danger" variant="outlined" danger />
      <Button label="Small" variant="outlined" size="sm" />
      <Button label="Large" variant="filled" size="lg" />
    </div>
  ),
};
