import React from 'react';

interface ScoreBarProps {
  score: number;        // Actual score (e.g., 3 for 3/5)
  fullScore: number;    // Max score (e.g., 5)
  percentage: number;   // 0.0-1.0
  passed: boolean;
}

export function ScoreBar({ score, fullScore, percentage, passed }: ScoreBarProps) {
  const pct = Math.round(percentage * 100);

  return (
    <div className="score-bar" data-passed={passed}>
      <div className="score-bar__header">
        <span className="score-bar__percentage">{pct}%</span>
        <span className={`score-bar__status ${passed ? 'passed' : 'failed'}`}>
          {passed ? '✅ 通过' : '❌ 未通过'}
        </span>
      </div>
      <div className="score-bar__track">
        <div
          className={`score-bar__fill ${passed ? 'passed' : 'failed'}`}
          style={{ width: `${pct}%` }}
        />
      </div>
      <div className="score-bar__footer">
        得分 {score.toFixed(1)} / 满分 {fullScore.toFixed(1)}
      </div>
    </div>
  );
}