/**
 * 评分环组件
 */

interface ScoreRingProps {
  score: number;
  size?: 'small' | 'medium' | 'large';
  showLabel?: boolean;
}

export default function ScoreRing({ score, size = 'medium', showLabel = true }: ScoreRingProps) {
  const sizeStyles = {
    small: 'w-12 h-12 text-lg border-4',
    medium: 'w-20 h-20 text-2xl border-6',
    large: 'w-24 h-24 text-3xl border-8',
  };

  const getScoreStatus = (score: number) => {
    if (score >= 80) return { class: 'pass', label: 'Pass', bgColor: 'bg-green-50', borderColor: 'border-green-500', textColor: 'text-green-700' };
    if (score >= 60) return { class: 'warn', label: 'Warning', bgColor: 'bg-amber-50', borderColor: 'border-amber-500', textColor: 'text-amber-700' };
    return { class: 'fail', label: 'Fail', bgColor: 'bg-red-50', borderColor: 'border-red-500', textColor: 'text-red-700' };
  };

  const status = getScoreStatus(score);

  return (
    <div 
      className={`rounded-full flex flex-col items-center justify-center ${sizeStyles[size]} ${status.bgColor} ${status.borderColor} ${status.textColor}`}
      style={{ borderWidth: size === 'small' ? 4 : size === 'medium' ? 6 : 8 }}
    >
      <span className="font-bold">{score}</span>
      {showLabel && size !== 'small' && (
        <span className="text-[10px] font-bold uppercase">{status.label}</span>
      )}
    </div>
  );
}