'use client'

import React from 'react'

interface ProgressRingProps {
  progress: number  // 0-100
  size?: number
  strokeWidth?: number
  label: string
  value: string
  color?: string
  isDark?: boolean
}

export function ProgressRing({
  progress,
  size = 80,
  strokeWidth = 6,
  label,
  value,
  color = '#60a5fa',
  isDark = true,
}: ProgressRingProps) {
  const radius = (size - strokeWidth) / 2
  const circumference = radius * 2 * Math.PI
  const offset = circumference - (Math.min(progress, 100) / 100) * circumference

  return (
    <div className="flex flex-col items-center gap-1">
      <div className="relative" style={{ width: size, height: size }}>
        <svg width={size} height={size} className="-rotate-90">
          {/* Background circle */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke={isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)'}
            strokeWidth={strokeWidth}
          />
          {/* Progress circle */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke={color}
            strokeWidth={strokeWidth}
            strokeDasharray={circumference}
            strokeDashoffset={offset}
            strokeLinecap="round"
            className="transition-all duration-700 ease-out"
          />
        </svg>
        {/* Center text */}
        <div className="absolute inset-0 flex items-center justify-center">
          <span className={`text-sm font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            {value}
          </span>
        </div>
      </div>
      <span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
        {label}
      </span>
    </div>
  )
}