import type { NavCount } from '../../context/seo-badges.context';
import { classNames } from '../../lib/utils';

/** The number of open items behind a row: red while any is a problem, amber for warnings. */
export function NavCountPill({ count, tone }: NavCount): React.ReactElement {
  return (
    <span
      className={classNames(
        'flex-none rounded-full px-1.5 py-[3px] text-[10.5px] font-bold leading-none tabular-nums',
        tone === 'danger'
          ? 'bg-status-danger-surface text-status-danger-fg'
          : 'bg-status-warning-surface text-status-warning-fg'
      )}
      aria-label={`${count} open`}
    >
      {count > 99 ? '99+' : count}
    </span>
  );
}