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

import { makeStyles, Typography } from '@material-ui/core'
import Avatar from '@mui/material/Avatar';
import { slicedWord, firstLetter,prodBaseURL } from '../../../../../../helpers';
import { TChat } from '../../../../../../typescript/redux/chats/types';

const useStyles = makeStyles({
  stackItem: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    padding:5,
    borderRadius: 5,
    cursor:'pointer',
    '&:hover': {
        background: '#eeeded'
      }
    },
  titleName: {
    color: '#575757',
    fontSize: 16,
    paddingTop:5
  }
})

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

const RecentItem = ({handleListItemClick,chat}:IRecentItem) => {
  const classes = useStyles()
  const { name, lastName,color,avatarUrl,companionId } = chat
 
 

return (
  <div onClick={() => handleListItemClick(companionId)} className={classes.stackItem}>
     <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
       sx={{ background: color, width: 54, height: 54}}>
       {`${firstLetter(name)}${firstLetter(lastName)}`}
      </Avatar>
      <Typography variant="h6" className={classes.titleName} >{`${firstLetter(name)}${slicedWord(name, 8, 1)}`}</Typography>
  </div>
  )
}

export default RecentItem