import type { ReactNode } from "react";

export interface BadgeProps {
  children: ReactNode;
  variant?: "default" | "primary" | "muted";
  className?: string;
}

const variants = {
  default: "bg-gray-100 text-gray-700",
  primary: "bg-[var(--color-primary-muted)] text-primary",
  muted: "bg-[var(--color-secondary-muted)] text-secondary/70",
};

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