const Badge = ({ level, size = "sm" }) => {
  const isReq = level === "required";
  const base = size === "sm" ? "text-[10px] px-1.5 py-0.5" : "text-xs px-2 py-1";
  return (
    <span className={`${base} rounded font-bold tracking-wider uppercase inline-block ${isReq ? "bg-rose-100 text-rose-700" : "bg-amber-100 text-amber-700"}`}>
      {isReq ? "REQ" : "REC"}
    </span>
  );
};

window.SpecComponents = window.SpecComponents || {};
window.SpecComponents.Badge = Badge;