import { cn } from "@/lib/utils";

type BadgeVariant =
  | "default"
  | "outline"
  | "difficulty-easy"
  | "difficulty-medium"
  | "difficulty-hard"
  | "category"
  | "pattern"
  | "optimal";

interface BadgeProps {
  children: React.ReactNode;
  className?: string;
  variant?: BadgeVariant;
  "aria-label"?: string;
}

const variantClasses: Record<BadgeVariant, string> = {
  default: "bg-[var(--secondary)] text-[var(--secondary-foreground)]",
  outline: "border border-[var(--border)] text-[var(--muted-foreground)]",
  "difficulty-easy":
    "text-[var(--difficulty-easy)] bg-[var(--difficulty-easy-bg)]",
  "difficulty-medium":
    "text-[var(--difficulty-medium)] bg-[var(--difficulty-medium-bg)]",
  "difficulty-hard":
    "text-[var(--difficulty-hard)] bg-[var(--difficulty-hard-bg)]",
  category: "text-[var(--badge-category)] bg-[var(--badge-category-bg)]",
  pattern: "text-[var(--badge-pattern)] bg-[var(--badge-pattern-bg)]",
  optimal: "text-[var(--badge-optimal)] bg-[var(--badge-optimal-bg)]",
};

export function Badge({
  children,
  className,
  variant = "default",
  "aria-label": ariaLabel,
}: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
        variantClasses[variant],
        className
      )}
      aria-label={ariaLabel}
    >
      {children}
    </span>
  );
}
