import type { FC } from 'react';

import Avatar from '@material-hu/mui/Avatar';
import { SxProps } from '@material-hu/mui/styles';

import groupsIcon from 'src/assets/svg/group.svg';

export type GroupChatAvatarProps = {
  pictureUrl: string;
  color: string;
  className?: string;
  sx?: SxProps;
};

const GroupChatAvatar: FC<GroupChatAvatarProps> = props => {
  const { pictureUrl, color, sx = {}, className } = props;

  if (pictureUrl?.length > 0) {
    return (
      <Avatar
        className={className}
        src={pictureUrl}
        alt=""
        sx={sx}
      />
    );
  }

  return (
    <Avatar
      className={className}
      sx={{
        backgroundColor: color,
        ...sx,
      }}
    >
      <img
        src={groupsIcon}
        alt=""
        style={{
          height: '65%',
          width: '65%',
        }}
      />
    </Avatar>
  );
};

export default GroupChatAvatar;