import { styled } from '@mui/material';
import MuiAvatarGroup from '@mui/material/AvatarGroup';
import { CustomAvatarGroupProps } from './types';
import type { Theme } from '../@styles/theme-provider';

const NOT_DOM_PROPS = ['stacked', 'clickableCounter'];
const CustomAvatarGroup = styled(MuiAvatarGroup, {
  shouldForwardProp: prop => !NOT_DOM_PROPS.includes(prop.toString())
})<CustomAvatarGroupProps>`
  flex-direction: row;

  .MuiAvatarGroup-avatar,
  .MuiAvatarGroup-avatar:last-child {
    margin: 0;
    margin-inline-start: ${({ stacked, theme }) =>
      stacked ? theme.spacing(-1) : theme.spacing(0.5)};
  }

  .counter {
    all: unset;
    display: grid;
    align-content: center;
    order: 1;
    color: ${({ theme }: { theme: Theme }) => theme.palette.secondary['500']};
    ${({ clickableCounter }) => clickableCounter && 'cursor: pointer;'}
    margin-inline-start: ${({ theme }) => theme.spacing(1)};
  }
`;

export default CustomAvatarGroup;