import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';
import type { AvatarProps } from './types';

/**
 * Used by the AvatarGroup component!
 */
const createClasses = makeStyles<Theme, AvatarProps>(theme => ({
  root: props => {
    const { backgroundColor, color, customSize } = props;
    const sizeStyleProps = customSize && {
      fontSize: Math.max(8, customSize * (3 / 8)),
      width: customSize,
      height: customSize
    };
    return {
      ...theme.typography.caption2,
      backgroundColor,
      color,
      ...sizeStyleProps
    };
  },
  small: {
    fontSize: '12px !important',
    width: theme.spacing(3),
    height: theme.spacing(3)
  },
  medium: {
    fontSize: '14px !important',
    width: theme.spacing(4),
    height: theme.spacing(4)
  },
  large: {
    fontSize: '16px !important',
    width: theme.spacing(5),
    height: theme.spacing(5)
  },
  xlarge: {
    fontSize: '36px !important',
    width: theme.spacing(13),
    height: theme.spacing(13)
  },
  initials: {
    font: 'inherit'
  },
  icon: {
    color: 'inherit',
    width: '50%',
    height: '50%',
    '& > div': {
      width: '100%',
      height: '100%'
    }
  }
}));

export default createClasses;