import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "border-border bg-surface-2 text-muted",
        primary: "border-transparent bg-primary text-primary-fg",
        accent: "border-accent/30 bg-accent/15 text-accent",
        success: "border-success/30 bg-success/15 text-success",
        warning: "border-warning/30 bg-warning/15 text-warning",
        danger: "border-danger/30 bg-danger/15 text-danger",
        common: "border-border bg-surface-2 text-muted",
        rare: "border-rare/40 bg-rare/15 text-rare",
        epic: "border-epic/40 bg-epic/15 text-epic",
        legendary: "border-legend/40 bg-legend/15 text-legend",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

export function Badge({
  className,
  variant,
  ...props
}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
}