import type React from "react"

interface CircularProgressDisplayProps {
  overallProgress: number
  totalCourses: number
  totalExercises: number
}

const CircularProgressDisplay: React.FC<CircularProgressDisplayProps> = ({
  overallProgress,
  totalCourses,
  totalExercises,
}) => {
  const radius = 40
  const circumference = 2 * Math.PI * radius

  // For the "Courses" ring (blue)
  const coursesProgress = (totalCourses / 5) * 100 // Assuming max 5 courses for visual representation
  const coursesStrokeDashoffset = circumference - (coursesProgress / 100) * circumference

  // For the "Exercises" ring (green)
  const exercisesProgress = (totalExercises / 50) * 100 // Assuming max 50 exercises for visual representation
  const exercisesStrokeDashoffset = circumference - (exercisesProgress / 100) * circumference

  return (
    <div className="relative w-32 h-32 mx-auto flex items-center justify-center">
      <svg className="w-full h-full" viewBox="0 0 100 100">
        {/* Overall Progress Background Circle */}
        <circle
          className="text-gray-200"
          strokeWidth="8"
          stroke="currentColor"
          fill="transparent"
          r={radius}
          cx="50"
          cy="50"
        />

        {/* Courses Ring (Blue) */}
        <circle
          className="text-blue-500"
          strokeWidth="8"
          strokeDasharray={circumference}
          strokeDashoffset={coursesStrokeDashoffset}
          strokeLinecap="round"
          stroke="currentColor"
          fill="transparent"
          r={radius}
          cx="50"
          cy="50"
          transform="rotate(-90 50 50)"
        />

        {/* Exercises Ring (Green) */}
        <circle
          className="text-green-500"
          strokeWidth="8"
          strokeDasharray={circumference}
          strokeDashoffset={exercisesStrokeDashoffset}
          strokeLinecap="round"
          stroke="currentColor"
          fill="transparent"
          r={radius - 10} // Slightly smaller radius for the inner ring
          cx="50"
          cy="50"
          transform="rotate(-90 50 50)"
        />
      </svg>
      <div className="absolute text-center">
        <div className="text-3xl font-black text-gray-800">{overallProgress}%</div>
        <div className="text-xs text-gray-600 font-semibold">Общий прогресс</div>
      </div>
    </div>
  )
}

export default CircularProgressDisplay