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

interface Props {
    match_score: any
};

const MatchScore = ({ match_score} : Props) => {
  const [score, setScore] = useState(0);

  useEffect(() => {
    let start = 0;
    const end = parseInt(match_score);
    if (isNaN(end)) return;

    const duration = 1000; // 1 second
    const stepTime = Math.max(Math.floor(duration / end), 15); // smooth step

    const timer = setInterval(() => {
      start += 1;
      setScore(start);
      if (start >= end) clearInterval(timer);
    }, stepTime);

    return () => clearInterval(timer);
  }, [match_score]);

  return (
    <div className="flex items-center gap-2">
      <div className="w-10 h-10 relative">
        <svg className="absolute top-0 left-0 w-full h-full" viewBox="0 0 36 36">
          <path
            className="text-gray-300"
            stroke="currentColor"
            strokeWidth="3"
            fill="none"
            d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831"
          />
          <path
            className="text-blue-600"
            stroke="currentColor"
            strokeWidth="3"
            strokeDasharray={`${score}, 100`}
            fill="none"
            d="M18 2.0845
              a 15.9155 15.9155 0 0 1 0 31.831
              a 15.9155 15.9155 0 0 1 0 -31.831"
          />
          <text
            x="18"
            y="22"
            textAnchor="middle"
            fontSize="10"
            fill="#333"
          >
            {score}
          </text>
        </svg>
      </div>
      <p className="text-black text-sm font-medium">{score}% Match</p>
    </div>
  );
};

export default MatchScore;
