import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Check, Star, X } from "@lucide/vue"
import { Badge } from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Badge",
  component: Badge,
  tags: ["autodocs"],
  parameters: componentDoc("Badge"),
  argTypes: {
    variant: {
      control: "select",
      options: [
        "default",
        "secondary",
        "destructive",
        "outline",
        "success",
        "warning",
        "info",
      ],
      description: "Visual style.",
    },
    size: {
      control: "select",
      options: ["default", "sm", "lg"],
      description: "Size.",
    },
  },
  args: { variant: "default", size: "default" },
} satisfies Meta<typeof Badge>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Badge },
    setup() {
      return { args }
    },
    template: '<Badge v-bind="args">Badge</Badge>',
  }),
}

export const AllVariants: Story = {
  name: "All Variants",
  render: () => ({
    components: { Badge },
    template: `
      <div class="flex flex-wrap items-center gap-2">
        <Badge variant="default">Default</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="destructive">Destructive</Badge>
        <Badge variant="outline">Outline</Badge>
        <Badge variant="success">Success</Badge>
        <Badge variant="warning">Warning</Badge>
        <Badge variant="info">Info</Badge>
      </div>
    `,
  }),
}

export const AllSizes: Story = {
  name: "All Sizes",
  render: () => ({
    components: { Badge },
    template: `
      <div class="flex flex-wrap items-center gap-2">
        <Badge size="sm">Small</Badge>
        <Badge size="default">Default</Badge>
        <Badge size="lg">Large</Badge>
      </div>
    `,
  }),
}

export const WithIcon: Story = {
  name: "With Icon",
  render: () => ({
    components: { Badge, Check, Star, X },
    template: `
      <div class="flex flex-wrap items-center gap-2">
        <Badge variant="success"><Check /> Verified</Badge>
        <Badge variant="warning"><Star /> Featured</Badge>
        <Badge variant="destructive"><X /> Failed</Badge>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Badge, Check, Star },
    template: `
      <div class="space-y-6">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Variants</h3>
          <div class="flex flex-wrap items-center gap-2">
            <Badge>Default</Badge>
            <Badge variant="secondary">Secondary</Badge>
            <Badge variant="destructive">Destructive</Badge>
            <Badge variant="outline">Outline</Badge>
            <Badge variant="success">Success</Badge>
            <Badge variant="warning">Warning</Badge>
            <Badge variant="info">Info</Badge>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Sizes</h3>
          <div class="flex flex-wrap items-center gap-2">
            <Badge size="sm">sm</Badge>
            <Badge size="default">default</Badge>
            <Badge size="lg">lg</Badge>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">With icons</h3>
          <div class="flex flex-wrap items-center gap-2">
            <Badge variant="success"><Check /> Verified</Badge>
            <Badge variant="warning"><Star /> Featured</Badge>
          </div>
        </section>
      </div>
    `,
  }),
}
