"use client";

import React from "react";

type ScoreCircleProps = {
  score: number; // Current score
  maxScore?: number; // Maximum score (default: 100)
  label: string; // Label text
  size?: number; // Diameter in pixels
};

const ScoreCircle: React.FC<ScoreCircleProps> = ({
  score,
  maxScore = 100,
  label,
  size = 88,
}) => {
  const radius = (size - 10) / 2; // account for stroke width
  const circumference = 2 * Math.PI * radius;
  const progress = Math.min(score / maxScore, 1); // clamp to 100%
  const offset = circumference - progress * circumference;

  return (
    <div className="flex flex-col items-center">
      <svg width={size} height={size} className="transform">
        {/* Background circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeWidth="9"
          fill="none"
          className="stroke-white/40"
        />
        {/* Progress circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeWidth="3"
          fill="none"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
          className="transition-all duration-500 ease-out stroke-amber-600/75"
        />
        {/* Score text */}
        <text
          x="50%"
          y="50%"
          dominantBaseline="middle"
          textAnchor="middle"
          fontSize={size / 4}
          fill="#111827"
          className="font-bogart text-gray-950"
        >
          {score}
        </text>
      </svg>
      <span className="text-xs text-gray-950">{label}</span>
    </div>
  );
};

export default ScoreCircle;