import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CircularProgressBarContainer, Title, ProgressCircle, BackgroundCircle, } from './CircularProgressBar.component.style';
function CircularProgressBar({ percent, radius, strokeWidth = 10, title, color, backgroundColor, children, ...rest }) {
    const centerPointCoordinate = strokeWidth / 2 + radius;
    const svgSize = centerPointCoordinate * 2;
    const CIRCUMFERENCE = Math.PI * (radius * 2);
    return (_jsxs(CircularProgressBarContainer, { className: "sc-circularprogressbar", ...rest, children: [title && _jsx(Title, { children: title }), _jsxs("svg", { width: svgSize, height: svgSize, children: [_jsx(BackgroundCircle, { cx: centerPointCoordinate, cy: centerPointCoordinate, backgroundColor: backgroundColor, r: radius, strokeWidth: strokeWidth }), _jsx(ProgressCircle, { percent: percent, color: color, circumference: CIRCUMFERENCE, cx: centerPointCoordinate, cy: centerPointCoordinate, r: radius, strokeWidth: strokeWidth, transform: `rotate(-90 ${centerPointCoordinate}  ${centerPointCoordinate})` }), children] })] }));
}
export { CircularProgressBar };
