Badge

import { Check, Star } from "lucide-react";

import { Badge } from "@/components/ui/badge";

const VARIANTS = ["primary", "secondary", "destructive", "outline"] as const;

/**
 * Live Badge example — the four documented variants and the optional leading
 * icon slot, rendered with the real component so the page doubles as a visual
 * check. Badge is static: nothing here is clickable or focusable.
 */
export function BadgeShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Variants
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          {VARIANTS.map((variant) => (
            <Badge key={variant} variant={variant}>
              {variant[0].toUpperCase() + variant.slice(1)}
            </Badge>
          ))}
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Leading icon
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          <Badge leadingIcon={<Check />}>Verified</Badge>
          <Badge variant="outline" leadingIcon={<Star />}>
            Featured
          </Badge>
        </div>
      </section>
    </div>
  );
}