import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import './styles.scss';
import { Box, CircularProgress } from '@mui/material';
import { useEffect, useState } from 'react';
export const SpinnerSizes = ['large', 'medium', 'small', 'x-small'];
export const TitlePlacements = ['right', 'bottom'];
export default function Spinner({ className, size = 'medium', title, description, titlePlacement = 'right' }) {
    const getClassNames = cx('ds-spinner', className, size, {
        'title-bottom': titlePlacement === 'bottom',
        'title-right': titlePlacement === 'right',
    });
    const [circleSize, setCircleSize] = useState(40);
    useEffect(() => {
        switch (size) {
            case 'large':
                setCircleSize(56);
                break;
            case 'small':
                setCircleSize(32);
                break;
            case 'x-small':
                setCircleSize(24);
                break;
            default:
                setCircleSize(40);
        }
    }, [size]);
    return (_jsxs("div", { className: getClassNames, children: [_jsxs(Box, { position: "relative", display: "inline-flex", children: [_jsx(CircularProgress, { variant: "determinate", value: 100, size: circleSize, thickness: 4, sx: {
                            color: '#EDF3FF',
                            position: 'absolute',
                            left: 0,
                        } }), _jsx(CircularProgress, { variant: "indeterminate", disableShrink: true, size: circleSize, thickness: 4, sx: {
                            color: '#B720E9',
                            animationDuration: '1.5s',
                        } })] }), title && (_jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "desc", children: description })] }))] }));
}
