frontend/src/components/ScoreRing.jsx

/**
 * ScoreRing.jsx
 * Animated SVG circular score ring used in the candidate table.
 */
export default function ScoreRing({ score, size = 56 }) {
  const radius = 20;
  const circumference = 2 * Math.PI * radius; // ≈ 125.6
  const offset = circumference - (score / 100) * circumference;

  const color = score >= 70 ? '#10b981' : score >= 50 ? '#f59e0b' : '#ef4444';

  return (
    <svg width={size} height={size} viewBox="0 0 48 48" className="transform -rotate-90">
      {/* Background ring */}
      <circle cx="24" cy="24" r={radius} fill="none" stroke="#1e293b" strokeWidth="4" />
      {/* Score ring */}
      <circle
        cx="24" cy="24" r={radius}
        fill="none"
        stroke={color}
        strokeWidth="4"
        strokeLinecap="round"
        strokeDasharray={circumference}
        strokeDashoffset={offset}
        style={{ transition: 'stroke-dashoffset 1s ease-out, stroke 0.3s' }}
      />
      {/* Score text (needs rotate back) */}
      <text
        x="24" y="24"
        textAnchor="middle"
        dominantBaseline="central"
        fill={color}
        fontSize="11"
        fontWeight="700"
        fontFamily="Inter, sans-serif"
        transform="rotate(90 24 24)"
      >
        {score.toFixed(0)}
      </text>
    </svg>
  );
}