FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SearchLists/ChatListRecent/ChatItem/index.tsx

import { makeStyles,Typography } from '@material-ui/core'
import ListItemButton from '@mui/material/ListItemButton';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';

import { TChat } from '../../../../../../typescript/redux/chats/types';
import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../../helpers';

const useStyles = makeStyles({
  listItemInnerText: {
    display: 'flex',
    alignContent: 'center',
    alignItems: 'center',
    flexWrap: 'nowrap',
  },
  listItem_iconAvatar: {
    marginRight:10
  },
  listItem_iconRight: {
    marginRight: 10,
  },
  listItem_icon_time: {
    fontSize: 12,
    marginLeft: 5,
    paddingBottom:25,
    color: '#1b1b1b'
  },
})

interface IChatItem {
  chat: TChat,
  handleListItemClick: (companionId: string) => void,
}

const  ChatItem = ({chat,handleListItemClick}:IChatItem) => {
  const classes = useStyles()
  const {name,lastName,avatarUrl,color,companionId,lastMessage,lastMessageCreatedAt,createdAt} = chat

  return (
      <ListItemButton onClick={() => handleListItemClick(companionId)}>
        <ListItemIcon className={classes.listItem_iconAvatar}>
          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
            sx={{ background: color, width: 54, height: 54 }}>
            {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
        </ListItemIcon> 
        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
            secondary={`${lastMessage ? slicedWord(lastMessage, 35) :
            `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}`}/>
        <ListItemIcon className={classes.listItem_iconRight}>
          <Typography className={classes.listItem_icon_time} variant="h6" color="initial">
            {timeStampEU(lastMessageCreatedAt?lastMessageCreatedAt:createdAt)}
          </Typography>
        </ListItemIcon>            
      </ListItemButton>    
  );
}
export default ChatItem