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

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "ok" | "warn" | "bad" | "muted" | "outline";
}

export function Badge({ className, variant = "default", ...props }: BadgeProps) {
  const baseStyles = "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold transition-colors focus:outline-none";

  const variants = {
    default: "bg-[#4A7C82] text-white",
    ok: "bg-[#E6F4EA] text-[#1E7B34]",
    warn: "bg-[#FDF3E7] text-[#92600E]",
    bad: "bg-[#FCEAEA] text-[#B42318]",
    muted: "bg-[#EAF1F2] text-[#4A7C82]",
    outline: "border border-[#E1E6E7] text-[#2E3A3F]",
  };

  return (
    <div className={cn(baseStyles, variants[variant], className)} {...props} />
  );
}