import { cn } from '@/lib/utils';
import { statValueColor } from '@/lib/colors';

interface Props {
  label: string;
  value: number;
  /**
   * Optional explicit bar color. When omitted, the bar is colored by its value
   * on a red → yellow → green ramp (low = danger, high = strong).
   */
  color?: string;
  testId?: string;
  className?: string;
}

/**
 * A compact 0–100 stat bar. The fill animates (width + color) when the value
 * changes, so a stat bump is visible at a glance. Defaults to a value-driven
 * red→green color so a low stat reads as "danger".
 */
export default function StatBar({ label, value, color, testId, className }: Props) {
  const v = Math.max(0, Math.min(100, Math.round(value)));
  return (
    <div className={cn('flex items-center gap-2 text-xs', className)}>
      <span className="w-16 shrink-0 capitalize text-muted-foreground">{label}</span>
      <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
        <div
          className="h-full rounded-full transition-[width,background-color] duration-500 ease-out"
          style={{ width: `${v}%`, background: color ?? statValueColor(v) }}
        />
      </div>
      <span className="w-8 shrink-0 text-right font-semibold tabular-nums" data-testid={testId}>
        {v}
      </span>
    </div>
  );
}