import { Badge } from "@ai-ui/ui";
import type { Meta, StoryObj } from "@storybook/react";

const meta = {
  title: "Components/Badge",
  component: Badge,
  args: {
    children: "Stable",
    size: "md",
    tone: "neutral",
    variant: "subtle"
  },
  argTypes: {
    asChild: {
      control: "boolean"
    },
    children: {
      control: "text"
    },
    className: {
      control: false
    },
    size: {
      control: "radio",
      options: ["sm", "md"]
    },
    tone: {
      control: "select",
      options: ["neutral", "primary", "success", "warning", "destructive"]
    },
    variant: {
      control: "radio",
      options: ["subtle", "solid", "outline"]
    }
  },
  parameters: {
    layout: "centered"
  },
  tags: ["autodocs"]
} satisfies Meta<typeof Badge>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Playground: Story = {};

export const Matrix: Story = {
  render: () => (
    <div className="grid w-[720px] gap-4">
      <div className="flex flex-wrap items-center gap-3">
        <Badge>Neutral</Badge>
        <Badge tone="primary">Primary</Badge>
        <Badge tone="success">Success</Badge>
        <Badge tone="warning">Warning</Badge>
        <Badge tone="destructive">Destructive</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Badge variant="outline">Outline</Badge>
        <Badge tone="primary" variant="outline">
          Brand
        </Badge>
        <Badge tone="success" variant="solid">
          Shipped
        </Badge>
        <Badge size="sm" tone="warning" variant="solid">
          Needs review
        </Badge>
      </div>
    </div>
  )
};