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

import { SIZE_LARGE, SIZE_MEDIUM, SIZE_SMALL, SIZE_X_SMALL } from '@/mui/constants';
import { ALPHA_500 } from '@/mui/constants/opacity';

export default function MuiAvatar(theme: Theme): Components['MuiAvatar'] {
  return {
    variants: [
      {
        props: { size: SIZE_X_SMALL },
        style: {
          width: 20,
          height: 20,
          fontSize: 9,
        },
      },
      {
        props: { size: SIZE_SMALL },
        style: {
          width: 24,
          height: 24,
          fontSize: 10,
        },
      },
      {
        props: { size: SIZE_MEDIUM },
        style: {
          width: 28,
          height: 28,
          fontSize: 12,
        },
      },
      {
        props: { size: SIZE_LARGE },
        style: {
          width: 32,
          height: 32,
          fontSize: 14,
        },
      },
    ],
    styleOverrides: {
      root: {
        color: theme.palette.common.black,
        backgroundColor: theme.palette.common.white,
        textTransform: 'uppercase',
        width: 28,
        height: 28,
        fontSize: 12,
        lineHeight: 0,
        boxShadow: `0 0 0 1px ${alpha(theme.palette.common.white, ALPHA_500)}`,
        cursor: 'default',
      },
    },
  };
}
