import React from 'react';

const ConfidenceRing = ({ score }) => {
    const r = 28, c = 2 * Math.PI * r;
    const fill = (score / 100) * c;
    const color = score >= 80 ? '#97c9aa' : score >= 60 ? '#fdd4b1' : '#f7a8a5';
    return (
        <svg width="72" height="72" viewBox="0 0 72 72" className="lotto-confidence-ring" aria-hidden>
            <circle cx="36" cy="36" r={r} stroke="rgba(255,255,255,0.08)" strokeWidth="6" fill="none" />
            <circle
                cx="36" cy="36" r={r}
                stroke={color} strokeWidth="6" fill="none"
                strokeDasharray={`${fill} ${c - fill}`}
                strokeLinecap="round"
                transform="rotate(-90 36 36)"
            />
            <text x="36" y="41" textAnchor="middle" fill={color} fontSize="16" fontWeight="600"
                style={{ fontFamily: 'inherit' }}>
                {score}
            </text>
        </svg>
    );
};

export default ConfidenceRing;