import { jsx as _jsx } from "react/jsx-runtime";
import { Box, useTheme } from '@mui/material';
import { AI_SPARKLE_PART_CLASS, SPARKLE_PARTS, SPARKLE_VIEWBOX, } from './constants';
const AISpinner = ({ size = 24, color, sx }) => {
    const theme = useTheme();
    const isLight = theme.palette.mode === 'light';
    const mainColor = color ??
        (isLight
            ? theme.palette.new.graphics.brand[900]
            : theme.palette.new.text.neutral.inverted);
    return (_jsx(Box, { component: "svg", viewBox: SPARKLE_VIEWBOX, role: "img", "aria-label": "Loading", sx: {
            display: 'block',
            width: size,
            height: size,
            ...sx,
        }, children: SPARKLE_PARTS.map(({ id, d, animationName, durationS, delayS }) => (_jsx(Box, { component: "path", className: `${AI_SPARKLE_PART_CLASS} ${AI_SPARKLE_PART_CLASS}--${id}`, d: d, fillRule: "evenodd", clipRule: "evenodd", stroke: "none", sx: {
                fill: mainColor,
                animation: `${animationName} ${durationS}s ease-in-out ${delayS}s infinite`,
                '@media (prefers-reduced-motion: reduce)': {
                    animation: 'none',
                    fillOpacity: 1,
                },
            } }, id))) }));
};
export default AISpinner;
