import type { Meta, StoryObj } from "@storybook/vue3-vite";
import KindBadge from "./KindBadge.vue";

const meta: Meta<typeof KindBadge> = {
  title: "Components/KindBadge",
  component: KindBadge,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: { type: "select" },
      options: [
        "neutral",
        "info",
        "success",
        "warning",
        "danger",
        "muted",
        "public",
        "private",
        "active",
        "deprecated",
        "sunset",
      ],
    },
  },
};
export default meta;

type Story = StoryObj<typeof KindBadge>;

export const Default: Story = {
  args: { variant: "neutral" },
  render: (args) => ({
    components: { KindBadge },
    setup: () => ({ args }),
    template: `<KindBadge v-bind="args">submissions</KindBadge>`,
  }),
};

export const AllVariants: Story = {
  render: () => ({
    components: { KindBadge },
    template: `
      <div class="flex flex-wrap gap-2">
        <KindBadge variant="neutral">neutral</KindBadge>
        <KindBadge variant="info">info</KindBadge>
        <KindBadge variant="success">success</KindBadge>
        <KindBadge variant="warning">warning</KindBadge>
        <KindBadge variant="danger">danger</KindBadge>
        <KindBadge variant="muted">muted</KindBadge>
        <KindBadge variant="public">public</KindBadge>
        <KindBadge variant="private">private</KindBadge>
        <KindBadge variant="active">active</KindBadge>
        <KindBadge variant="deprecated">deprecated</KindBadge>
        <KindBadge variant="sunset">sunset</KindBadge>
      </div>
    `,
  }),
};

export const ResolverStatuses: Story = {
  render: () => ({
    components: { KindBadge },
    template: `
      <div class="flex flex-wrap gap-2">
        <KindBadge variant="active">active</KindBadge>
        <KindBadge variant="deprecated">deprecated</KindBadge>
        <KindBadge variant="sunset">sunset</KindBadge>
      </div>
    `,
  }),
};