'use client';
import clsx from 'clsx';
import { useEffect, useState } from 'react';
/**
 * RadialProgressBar component for rendering a circular progress bar with animated transition effects.
 *
 * @component
 * @example
 * // Example usage of RadialProgressBar component
 * <RadialProgressBar
 *   value={75}
 *   className="custom-progress-bar"
 *   text="75%"
 * />
 *
 * @param {Object} props - The properties of the RadialProgressBar component.
 * @param {number} props.value - The progress value between 0 and 100.
 * @param {string} props.className - Additional CSS classes for the component.
 * @param {string} [props.text] - Optional text to display inside the circle.
 *
 * @returns {ReactNode} The rendered RadialProgressBar component.
 */
export function RadialProgressBar({ value, className, text, fontSize, }) {
    const [percent, setPercent] = useState(0);
    useEffect(() => {
        setTimeout(() => {
            setPercent(value);
        }, 500);
    }, [value]);
    return (<div className={clsx(className, 'relative')}>
      <svg className="h-full w-full" viewBox="0 0 100 100">
        <circle className="text-gray-5 stroke-current" strokeWidth="10" cx="50" cy="50" r="40" fill="transparent"/>
        <circle style={{
            transition: 'stroke-dashoffset 0.5s',
            transform: 'rotate(-90deg)',
            transformOrigin: '50% 50%',
        }} className="text-lavender stroke-current" strokeWidth="10" strokeLinecap="round" cx="50" cy="50" r="40" fill="transparent" strokeDasharray="251.2" strokeDashoffset={`calc(251.2 - (251.2 * ${percent}) / 100)`}/>
        {!!text && (<text x="50" y="50" textAnchor="middle" alignmentBaseline="middle" fontWeight="600" fontSize={fontSize ?? '1rem'}>
            {text}
          </text>)}
      </svg>
    </div>);
}
//# sourceMappingURL=RadialProgressBar.jsx.map