import { type FC, memo } from 'react';

import Box from '@material-hu/mui/Box';

import { BUNNY_IMAGE_CLASSES } from 'src/pages/dashboard/Conversations/constants';
import { type ConversationMessage } from 'src/pages/dashboard/Conversations/types';
import { getInitials } from 'src/utils/userUtils';

import LazySecureImage from '../../shared/LazySecureImage';

type ConversationPillProps = {
  message: ConversationMessage;
  showUserPic: boolean;
};

const ConversationPill: FC<ConversationPillProps> = ({
  message,
  showUserPic,
}) => {
  if (!showUserPic) {
    return <Box sx={{ width: 40 }} />;
  }

  return (
    <LazySecureImage
      conversationId={message.channel}
      url={message.hu_data.picture_asset_url}
      isAvatar
      imageClass={BUNNY_IMAGE_CLASSES.AVATAR}
      avatarProps={{
        text: getInitials(message.username),
        color: 'primary',
        size: 'medium',
        sx: {
          '.MuiTypography-root': {
            color: theme => theme.palette.new.text.neutral.brand,
          },
        },
      }}
    />
  );
};

export default memo(ConversationPill);