"use client";
import React from 'react';

interface CircularProgressProps {
    percent: number;
    radius: number;
    strokeColor: string;
    strokeWidth: number;
}

const CircularProgress: React.FC<CircularProgressProps> = ({ percent, radius, strokeColor, strokeWidth }) => {
    const normalizedRadius = radius - strokeWidth * 2;
    const circumference = normalizedRadius * 2 * Math.PI;
    const strokeDashoffset = circumference - (percent / 100) * circumference;

    return (
        <svg height={radius * 2} width={radius * 2} style={{ transform: 'rotate(-90deg)' }}>
            <circle
                stroke="#e6e6e6"
                fill="transparent"
                strokeWidth={strokeWidth}
                r={normalizedRadius}
                cx={radius}
                cy={radius}
            />
            <circle
                stroke={strokeColor}
                fill="transparent"
                strokeWidth={strokeWidth}
                strokeDasharray={circumference + ' ' + circumference}
                style={{ strokeDashoffset, transition: 'stroke-dashoffset 0.5s ease 0s' }}
                r={normalizedRadius}
                cx={radius}
                cy={radius}
                strokeLinecap="round"
            />
            <text
                x="50%"
                y="50%"
                textAnchor="middle"
                dy=".3em"
                fill="#1a1f2b"
                fontSize="16px"
                fontWeight="bold"
                style={{ transform: 'rotate(90deg)', transformOrigin: 'center' }}
            >
                {percent}%
            </text>
        </svg>
    );
};

export default CircularProgress;
