import React from 'react';

interface ProgressCircleProps {
    percentage: number;
}

export const ProgressCircle: React.FC<ProgressCircleProps> = ({ percentage }) => {
    const radius = 45;
    const stroke = 9;
    const normalizedRadius = radius - stroke * 2;
    const circumference = normalizedRadius * 2 * Math.PI;
    const strokeDashoffset = circumference - (percentage / 100) * circumference;

    return (
        <svg height={radius * 2} width={radius * 2}>
            <circle
                stroke="#E6E8EA"
                fill="transparent"
                strokeWidth={stroke}
                r={normalizedRadius}
                cx={radius}
                cy={radius}
            />
            <circle
                stroke="#11212D"
                fill="transparent"
                strokeWidth={stroke}
                r={normalizedRadius}
                cx={radius}
                cy={radius}
                strokeDasharray={`${circumference} ${circumference}`}
                style={{ strokeDashoffset }}
                strokeLinecap="round"
            />
            <text x="50%" y="50%" textAnchor="middle" dy=".3em" className='text-base font-normal text-primary-text-color'>
                {`${percentage}%`}
            </text>
        </svg>
    );
};

export default ProgressCircle;
