import { Box, useTheme } from '@mui/material';

import {
  AI_SPARKLE_PART_CLASS,
  SPARKLE_PARTS,
  SPARKLE_VIEWBOX,
} from './constants';
import { type AISpinnerProps } from './types';

const AISpinner = ({ size = 24, color, sx }: AISpinnerProps) => {
  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 (
    <Box
      component="svg"
      viewBox={SPARKLE_VIEWBOX}
      role="img"
      aria-label="Loading"
      sx={{
        display: 'block',
        width: size,
        height: size,
        ...sx,
      }}
    >
      {SPARKLE_PARTS.map(({ id, d, animationName, durationS, delayS }) => (
        <Box
          key={id}
          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,
            },
          }}
        />
      ))}
    </Box>
  );
};

export type { AISpinnerProps };

export default AISpinner;