circular-progress.tsx

export interface CircularProgressProps {
  progress: number;
  size: number;
}

export const CircularProgress = ({ progress, size }: CircularProgressProps) => {
  // Calculate the percentage of the size
  const xPercentOfSize = (x: number) => (x / 100) * size;

  const strokeWidth = xPercentOfSize(8);
  const circleOffset = xPercentOfSize(5);

  // Calculate the circumference of the circle
  const radius = size / 2 - circleOffset;
  const circumference = 2 * Math.PI * radius;

  // Calculate the offset needed to display the progress bar
  const offset = circumference - (progress / 100) * circumference;

  return (
    <div className="relative flex items-center justify-center">
      <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
        <defs>
          <linearGradient id="gradient" x1="100%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#008D6C" />
            <stop offset="100%" stopColor="#11FFC7" />
          </linearGradient>
        </defs>
        <circle fill="none" r={radius} cx={size / 2} cy={size / 2} stroke="#EFF0F6" strokeWidth={strokeWidth} />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="url(#gradient)"
          strokeLinecap="round"
          strokeWidth={strokeWidth}
          strokeDashoffset={offset}
          strokeDasharray={circumference}
          transform={`rotate(90, ${size / 2}, ${size / 2})`}
        />
      </svg>
      <div className="absolute flex h-[50%] w-[50%] flex-col items-center gap-0 border border-transparent">
        <span bold size="base">
          {progress}%
        </span>
      </div>
    </div>
  );
};