import { cn } from '#/lib/utils.js';

/**
 * A number beside a label: how many of the thing the label names. The same
 * pill on a section tab, a list tab and a filter, so a count reads as a count
 * wherever it is.
 * @param {{value: number|string, active?: boolean, className?: string}} props
 */
export function Count({ value, active = false, className }) {
  return (
    <span
      className={cn(
        'inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1.5 font-medium text-[11px] leading-none tabular-nums',
        active ? 'bg-key/12 text-key' : 'bg-muted text-muted-foreground',
        className,
      )}
    >
      {value}
    </span>
  );
}