import React from 'react';
import { TimerMode } from '../types';

interface CircularProgressProps {
  progress: number;
  size?: number;
  strokeWidth?: number;
  mode: TimerMode;
  children: React.ReactNode;
}

export function CircularProgress({ 
  progress, 
  size = 280, 
  strokeWidth = 8, 
  mode,
  children 
}: CircularProgressProps) {
  const radius = (size - strokeWidth) / 2;
  const circumference = radius * 2 * Math.PI;
  const offset = circumference - (progress / 100) * circumference;

  const getColor = () => {
    switch (mode) {
      case 'focus': return 'stroke-rose-500 dark:stroke-rose-400';
      case 'shortBreak': return 'stroke-emerald-500 dark:stroke-emerald-400';
      case 'longBreak': return 'stroke-indigo-500 dark:stroke-indigo-400';
    }
  };

  const getBgColor = () => {
    switch (mode) {
      case 'focus': return 'stroke-rose-100 dark:stroke-rose-900/30';
      case 'shortBreak': return 'stroke-emerald-100 dark:stroke-emerald-900/30';
      case 'longBreak': return 'stroke-indigo-100 dark:stroke-indigo-900/30';
    }
  };

  return (
    <div className="relative inline-flex items-center justify-center">
      <svg
        width={size}
        height={size}
        className="transform -rotate-90"
      >
        {/* Background circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          strokeWidth={strokeWidth}
          className={getBgColor()}
        />
        {/* Progress circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          className={`${getColor()} transition-all duration-300 ease-out`}
          style={{
            strokeDasharray: circumference,
            strokeDashoffset: offset,
          }}
        />
      </svg>
      <div className="absolute inset-0 flex items-center justify-center">
        {children}
      </div>
    </div>
  );
}