import { CircularProgress, Stack } from '@mui/material';

import { type SpinnerProps } from './types';

const Spinner = ({
  centered = true,
  width = 'medium',
  darkBackground = false,
  sx,
  ...props
}: SpinnerProps) => {
  const size = width === 'small' ? 24 : 32;
  const circularProgress = (
    <CircularProgress
      sx={{
        color: theme => {
          const isDarkMode = theme.palette.mode === 'dark';

          return darkBackground || isDarkMode
            ? theme.palette.new.text.neutral.inverted
            : theme.palette.newBase?.brand[500];
        },
        ...sx,
      }}
      size={size}
      {...props}
    />
  );

  return centered ? (
    <Stack
      direction="row"
      sx={{ justifyContent: 'center', alignItems: 'center' }}
    >
      {circularProgress}
    </Stack>
  ) : (
    circularProgress
  );
};

export type { SpinnerProps };

export default Spinner;