// A small count pill shown beside a tab label or filter chip (pending requests, item counts). One
// source for the count-badge token so Tabs and FilterChipGroup can't drift. The `active` variant sits
// on an accent-filled parent (a pressed tab/chip), so it tints against accent-fg; the resting variant
// carries its own accent tint. Callers guard on `count > 0` — this just renders the pill.
export default function CountBadge({ count, active }: { count: number; active?: boolean }) {
  return (
    <span
      className={`tabular-nums text-2xs leading-none px-1.5 py-0.5 rounded-full ${
        active ? "bg-accent-fg/20" : "bg-accent/20 text-accent"
      }`}
    >
      {count}
    </span>
  );
}