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

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: "success" | "warning" | "danger" | "neutral" | "gold";
}

export function Badge({
  className,
  variant = "neutral",
  children,
  ...props
}: BadgeProps) {
  const variantStyles = {
    // PRD §16: bg-emerald-50 text-emerald-700
    success: "bg-emerald-50 text-emerald-700 border border-emerald-200/60",
    // PRD §16: bg-amber-50 text-amber-700
    warning: "bg-amber-50 text-amber-700 border border-amber-200/60",
    // PRD §16: bg-red-50 text-red-700
    danger: "bg-red-50 text-red-700 border border-red-200/60",
    // PRD §16: bg-slate-100 text-slate-600
    neutral: "bg-slate-100 text-slate-600 border border-slate-200/60",
    // Gold Accent
    gold: "bg-[#F7F4ED] text-[#0B1F33] border border-[#C8A45D]/40 font-semibold",
  };

  return (
    <span
      className={cn(
        // PRD §16 & §6: rounded-full px-2.5 py-1 text-xs font-medium
        "inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap",
        variantStyles[variant],
        className
      )}
      {...props}
    >
      {children}
    </span>
  );
}