frontend/src/components/ScoreBar.tsx

import { scoreColor } from "../utils/colors";

interface ScoreBarProps {
  score: number;
  max?: number;
}

export default function ScoreBar({ score, max = 1 }: ScoreBarProps) {
  const pct = Math.min(100, Math.max(0, (score / max) * 100));
  const color = scoreColor(score);
  return (
    <div className="score-bar-container">
      <div className="score-bar">
        <div className="score-bar-fill" style={{ width: `${pct}%`, background: color }} />
      </div>
      <span className="score-label" style={{ color }}>{score.toFixed(4)}</span>
    </div>
  );
}