import AvatarGroup, { avatarGroupClasses } from '@mui/material/AvatarGroup';
import { styled } from '../styled';
const getFontSize = (theme, size) => {
    const sizes = {
        sm: theme.typography.pxToRem(12),
        md: theme.typography.pxToRem(14),
        lg: theme.typography.pxToRem(16),
    };
    return sizes[size];
};
const getWidth = (size) => {
    const sizes = {
        sm: '24px',
        md: '32px',
        lg: '40px',
    };
    return sizes[size];
};
export const StyledAvatarGroup = styled(AvatarGroup, {
    shouldForwardProp: (prop) => !['$size'].includes(prop),
}) `
  & .${avatarGroupClasses.avatar} {
    width: ${({ $size }) => getWidth($size)};
    height: ${({ $size }) => getWidth($size)};

    font-size: ${({ theme, $size }) => getFontSize(theme, $size)};
    font-weight: ${({ theme }) => theme.typography.h5.fontWeight};

    border-width: 1px;
  }
`;
