import React from 'react';

export default function KrowScoreRing({ score = 0, size = 64, label = 'KROW Score' }) {
  const radius = (size - 8) / 2;
  const circ = 2 * Math.PI * radius;
  const offset = circ - (Math.min(100, score) / 100) * circ;
  const color = score >= 80 ? '#0838E0' : score >= 60 ? '#333F48' : score >= 40 ? '#6B7280' : '#EF4444';
  return (
    <div className="flex flex-col items-center">
      <div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
        <svg width={size} height={size} className="-rotate-90">
          <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="#E5E7EB" strokeWidth="5" />
          <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={color} strokeWidth="5" strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round" />
        </svg>
        <span className="absolute font-bold text-[#111827]" style={{ fontSize: size * 0.28 }}>{score}</span>
      </div>
      {label && <span className="text-[11px] text-[#6B7280] mt-1">{label}</span>}
    </div>
  );
}