import type { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

type BadgeVariant = "blue" | "green" | "outline" | "navy";

const variants: Record<BadgeVariant, string> = {
  blue: "bg-primary-soft text-primary-deep",
  green: "bg-ev-soft text-ev-deep",
  outline: "border border-border bg-white text-navy-muted",
  navy: "bg-navy-deep text-white",
};

type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
  variant?: BadgeVariant;
};

export function Badge({ className, variant = "blue", ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold",
        variants[variant],
        className,
      )}
      {...props}
    />
  );
}