import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import { SxProps, useTheme } from '@material-hu/mui/styles';

import HuAvatarGroup from '@material-hu/components/design-system/AvatarGroup';

type MoreParticipantsItemProps = {
  avatars: {
    src: string;
    text: string;
  }[];
  onClick: () => void;
  sx?: SxProps;
};

const MoreParticipantsItem: FC<MoreParticipantsItemProps> = props => {
  const { avatars, onClick, sx = {} } = props;
  const theme = useTheme();

  return (
    <Stack
      sx={{
        width: '100%',
        height: '100%',
        backgroundColor: theme.palette.base?.grey[800],
        border: `1px solid ${theme.palette.base?.grey[600]}`,
        borderRadius: 1,
        alignItems: 'center',
        justifyContent: 'center',
        ...sx,
      }}
    >
      <Stack
        sx={{ cursor: 'pointer' }}
        onClick={onClick}
      >
        <HuAvatarGroup avatars={avatars} />
      </Stack>
    </Stack>
  );
};

export default MoreParticipantsItem;