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

const meta: Meta<typeof Badge> = {
  title: "Primitives/Badge",
  component: Badge,
  argTypes: {
    color: {
      control: "select",
      options: ["default", "green", "blue", "purple", "yellow", "orange", "red", "cyan", "pink", "indigo"],
    },
  },
};
export default meta;

type Story = StoryObj<typeof Badge>;

export const Default: Story = { args: { text: "active", color: "green" } };
export const AllColors: Story = {
  render: () => (
    <div class="flex flex-wrap gap-2">
      <Badge text="lead" color="yellow" />
      <Badge text="active" color="green" />
      <Badge text="churned" color="red" />
      <Badge text="prospect" color="blue" />
      <Badge text="proposal" color="purple" />
      <Badge text="won" color="green" />
      <Badge text="lost" color="red" />
      <Badge text="default" color="default" />
    </div>
  ),
};
export const Clickable: Story = { args: { text: "click me", color: "cyan", onClick: () => alert("clicked!") } };
