const StatPill = ({ req, rec }) => (
  <div className="flex items-center gap-1.5 text-xs font-medium">
    <span className="flex items-center gap-1 bg-rose-50 text-rose-600 px-2 py-0.5 rounded-full border border-rose-100">
      <span className="w-1.5 h-1.5 rounded-full bg-rose-400 inline-block" />
      {req} required
    </span>
    <span className="flex items-center gap-1 bg-amber-50 text-amber-600 px-2 py-0.5 rounded-full border border-amber-100">
      <span className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block" />
      {rec} recommended
    </span>
  </div>
);

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