import './CircularProgress.css';

interface CircularProgressProps {
  value: number;
  label: string;
  color?: string;
  size?: number;
  subLabel?: string;
}

export const CircularProgress = ({ 
  value, 
  label, 
  color = 'var(--primary-color)',
  size = 150,
  subLabel
}: CircularProgressProps) => {
  const radius = size * 0.36; // 36% of size
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (value / 100) * circumference;
  const center = size / 2;
  
  // 根据尺寸动态计算字体大小
  const valueFontSize = size * 0.12; // 12% of size
  const subLabelFontSize = size * 0.08; // 8% of size
  const labelFontSize = size * 0.09; // 9% of size
  
  return (
    <div className="circular-progress" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle
          className="progress-ring-bg"
          cx={center}
          cy={center}
          r={radius}
          strokeWidth={size * 0.08}
        />
        <circle
          className="progress-ring-circle"
          stroke={color}
          strokeDasharray={`${circumference} ${circumference}`}
          strokeDashoffset={offset}
          cx={center}
          cy={center}
          r={radius}
          strokeWidth={size * 0.08}
        />
        {subLabel ? (
          <text 
            x={center} 
            y={center} 
            className="progress-value" 
            textAnchor="middle" 
            dy="0.3em"
            fontSize={subLabelFontSize}
          >
            {subLabel}
          </text>
        ) : (
          <text 
            x={center} 
            y={center} 
            className="progress-value" 
            textAnchor="middle" 
            dy="0.3em"
            fontSize={valueFontSize}
          >
            {Math.round(value)}%
          </text>
        )}
        <text 
          x={center} 
          y={center + size * 0.22} 
          className="progress-label" 
          textAnchor="middle"
          fontSize={labelFontSize}
        >
          {label}
        </text>
      </svg>
    </div>
  );
};
