import { cn } from '@/lib/cn';

const INT = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 });

/** "+250" / "−100" chip that pops in. Positive = lime, negative = danger, 0 = neutral. */
export function ScoreDelta({
  value,
  label,
  size = 'md',
  className,
}: {
  value: number;
  /** Optional word after the number, e.g. "pts" or "Line". */
  label?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  className?: string;
}) {
  const sign = value > 0 ? '+' : value < 0 ? '−' : '';
  return (
    <span
      className={cn(
        'num inline-flex items-baseline gap-1 rounded-full font-display font-extrabold whitespace-nowrap motion-safe:animate-score-bump',
        value > 0 && 'bg-lime text-on-bright',
        value < 0 && 'bg-danger text-on-bright',
        value === 0 && 'bg-raised text-muted',
        size === 'sm' && 'px-2.5 py-0.5 text-sm',
        size === 'md' && 'px-3.5 py-1 text-lg',
        size === 'lg' && 'px-5 py-1.5 text-2xl',
        size === 'xl' && 'px-7 py-2 text-4xl',
        className,
      )}
    >
      {sign}
      {INT.format(Math.abs(Math.round(value)))}
      {label && <span className="text-[0.6em] font-bold tracking-[0.08em] uppercase">{label}</span>}
    </span>
  );
}