interface CircularProgressProps {
  percentage: number;
  label: string;
}

export default function CircularProgress({ percentage, label }: CircularProgressProps) {
  return (
    <div className="relative mb-8">
      {/* Outer ring pulse */}
      <div className="absolute inset-0 rounded-full border-4 border-primary opacity-20 animate-pulse-ring" />

      {/* SVG circular progress */}
      <div className="relative h-48 w-48">
        <svg className="h-full w-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
          {/* Background circle */}
          <path
            className="text-slate-100"
            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"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
          />
          {/* Progress arc */}
          <path
            className="text-primary drop-shadow-md transition-all duration-700 ease-out"
            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"
            fill="none"
            stroke="currentColor"
            strokeDasharray={`${percentage}, 100`}
            strokeLinecap="round"
            strokeWidth="2.5"
          />
        </svg>

        {/* Center text */}
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-4xl font-bold text-slate-900">{percentage}%</span>
          <span className="mt-1 text-xs font-medium uppercase tracking-wider text-slate-400">
            {label}
          </span>
        </div>
      </div>
    </div>
  );
}