import type { Components } from '@mui/material/styles';

const sizes: Record<string, number> = {
  x5Small: 8,
  x4Small: 10,
  x3Small: 12,
  x2Small: 14,
  xSmall: 16,
  small: 18,
  medium: 20,
  large: 24,
  xLarge: 28,
  x2Large: 32,
  x3Large: 36,
  x4Large: 40,
  x5Large: 44,
  x6Large: 48,
  x7Large: 52,
  x8Large: 56,
  x9Large: 60,
};

export default function MuiCircularProgress(): Components['MuiCircularProgress'] {
  return {
    defaultProps: {
      color: 'neutral',
    },
    variants: [
      ...Object.keys(sizes).map((key) => ({
        props: { size: key },
        style: {
          width: sizes[key],
          aspectRatio: '1 / 1',
        },
      })),
    ],
  };
}
