import React from 'react';

export default function FortuneRing({ score, max = 100 }) {
  const radius = 80;
  const circumference = 2 * Math.PI * radius;
  const safe = Math.max(0, Math.min(score || 0, max));
  const dashOffset = circumference - (safe / max) * circumference;

  return (
    <div className="saju-fortune-ring">
      <svg viewBox="0 0 200 200">
        <circle
          cx="100" cy="100" r={radius}
          stroke="var(--saju-paper)" strokeWidth="14" fill="none"
        />
        <circle
          cx="100" cy="100" r={radius}
          stroke="var(--saju-gold)" strokeWidth="14" fill="none"
          strokeDasharray={circumference}
          strokeDashoffset={dashOffset}
          strokeLinecap="round"
          transform="rotate(-90 100 100)"
          style={{ transition: 'stroke-dashoffset 0.6s ease' }}
        />
      </svg>
      <div style={{ position: 'absolute', textAlign: 'center' }}>
        <div className="saju-fortune-ring__score">{safe}</div>
        <div className="saju-fortune-ring__total">/ {max}</div>
      </div>
    </div>
  );
}