// React import removed - not needed with JSX transform
import { motion } from 'framer-motion';
import { hexToRgba } from '../utils/portfolioColors';

interface RadialProgressProps {
  percentage: number;
  size?: number;
  color: string;
  strokeWidth?: number;
  showLabel?: boolean;
  className?: string;
  delay?: number;
}

export function RadialProgress({
  percentage,
  size = 56,
  color,
  strokeWidth = 4,
  showLabel = true,
  className = '',
  delay = 0,
}: RadialProgressProps) {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference - (percentage / 100) * circumference;

  return (
    <div
      className={`relative ${className}`}
      style={{ width: size, height: size }}
    >
      <svg
        width={size}
        height={size}
        viewBox={`0 0 ${size} ${size}`}
        className="transform -rotate-90"
      >
        {/* Background circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={hexToRgba(color, 0.15)}
          strokeWidth={strokeWidth}
        />

        {/* Animated progress circle */}
        <motion.circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          strokeDasharray={circumference}
          initial={{ strokeDashoffset: circumference }}
          animate={{ strokeDashoffset }}
          transition={{
            duration: 1,
            delay,
            ease: [0.22, 1, 0.36, 1],
          }}
        />
      </svg>

      {/* Percentage label */}
      {showLabel && (
        <motion.div
          className="absolute inset-0 flex items-center justify-center"
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 0.4,
            delay: delay + 0.5,
            ease: [0.22, 1, 0.36, 1],
          }}
        >
          <span className="text-sm font-bold text-gray-900">
            {percentage.toFixed(1)}%
          </span>
        </motion.div>
      )}
    </div>
  );
}
