import type { HTMLAttributes } from "react";
import { cn } from "../utils/cn.js";

export type BadgeVariant = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";

const variantClasses: Record<BadgeVariant, string> = {
  primary: "bg-primary-transparent text-primary-900",
  secondary: "bg-secondary-transparent text-secondary-900",
  success: "bg-success-transparent text-success-900",
  warning: "bg-warning-transparent text-warning-900",
  danger: "bg-danger-transparent text-danger-900",
  info: "bg-info-transparent text-info-900",
  neutral: "bg-light text-gray-900",
};

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
}

export function Badge({ variant = "neutral", className, children, ...rest }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold",
        variantClasses[variant],
        className,
      )}
      {...rest}
    >
      {children}
    </span>
  );
}