type CircularProgressProps = {
  progress: number;
  size: number;
  strokeWidth: number;
  ringClass: string;
  trackClass: string;
};

export function CircularProgress({
  progress,
  size,
  strokeWidth,
  ringClass,
  trackClass,
}: CircularProgressProps) {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - progress * circumference;

  return (
    <svg width={size} height={size} className="transform -rotate-90">
      <circle
        cx={size / 2}
        cy={size / 2}
        r={radius}
        fill="none"
        strokeWidth={strokeWidth}
        className={trackClass}
      />
      <circle
        cx={size / 2}
        cy={size / 2}
        r={radius}
        fill="none"
        strokeWidth={strokeWidth}
        strokeDasharray={circumference}
        strokeDashoffset={offset}
        strokeLinecap="round"
        className={`${ringClass} transition-all duration-1000 ease-linear`}
      />
    </svg>
  );
}
