src/components/ScoreBar.tsx

/**
 * ScoreBar — Animated horizontal bar showing score 0-1
 */

interface ScoreBarProps {
  score: number;
  label?: string;
  color?: string;
  height?: number;
}

export default function ScoreBar({
  score,
  label,
  color = '#6366f1',
  height = 6,
}: ScoreBarProps) {
  const pct = Math.min(100, Math.max(0, score * 100));

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%' }}>
      {label && (
        <span
          style={{
            fontSize: '12px',
            color: 'var(--color-text-secondary)',
            minWidth: '60px',
          }}
        >
          {label}
        </span>
      )}
      <div
        style={{
          flex: 1,
          height: `${height}px`,
          borderRadius: `${height / 2}px`,
          background: 'var(--color-surface-hover)',
          overflow: 'hidden',
        }}
      >
        <div
          className="score-bar-fill"
          style={{
            width: `${pct}%`,
            height: '100%',
            borderRadius: `${height / 2}px`,
            background: `linear-gradient(90deg, ${color}88, ${color})`,
          }}
        />
      </div>
      <span
        style={{
          fontSize: '12px',
          fontWeight: 600,
          color: 'var(--color-text-primary)',
          fontFamily: 'monospace',
          minWidth: '36px',
          textAlign: 'right',
        }}
      >
        {score.toFixed(2)}
      </span>
    </div>
  );
}