import React, { useEffect, useState } from "react";

export default function CompatibilityRing({ score, color }) {
  const [offset, setOffset] = useState(251.2); // محيط دائرة نصف قطرها 40 = 2 * PI * 40
  const radius = 40;
  const circumference = 2 * Math.PI * radius;

  useEffect(() => {
    const timer = setTimeout(() => {
      setOffset(circumference - (score / 100) * circumference);
    }, 100);
    return () => clearTimeout(timer);
  }, [score, circumference]);

  return (
    <div className="relative flex items-center justify-center w-32 h-32 mx-auto mb-6 drop-shadow-[0_0_15px_rgba(0,0,0,0.5)]">
      <svg className="transform -rotate-90 w-full h-full">
        {/* تعريف فلتر التوهج للـ SVG */}
        <defs>
          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="4" result="blur" />
            <feComposite in="SourceGraphic" in2="blur" operator="over" />
          </filter>
        </defs>
        
        {/* الخلفية */}
        <circle cx="64" cy="64" r={radius} fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="6" />
        
        {/* الشريط الملون */}
        <circle
          cx="64"
          cy="64"
          r={radius}
          fill="none"
          stroke={color}
          strokeWidth="6"
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          filter="url(#glow)"
          className="transition-all duration-1500 ease-out"
        />
      </svg>
      <div className="absolute flex flex-col items-center justify-center">
        <span className="font-mono text-4xl font-bold text-white shadow-black drop-shadow-md">{score}</span>
        <span className="font-mono text-[9px] text-slate-400">/ 100</span>
      </div>
    </div>
  );
}