import * as React from 'react';
import ListItemText from '@mui/material/ListItemText';
import ReactTimeAgo from 'react-time-ago'
import { ListItemAvatar, ListItem, Avatar } from '@mui/material';
import TimeAgo from 'javascript-time-ago'
import ru from 'javascript-time-ago/locale/ru.json'
import { Link } from 'react-router-dom'

TimeAgo.addLocale(ru)

export const ChatItem = ({ id, chat }) => {

    return (
        <ListItem button component={Link} to={`/chat_id.${id}`} divider >
            <ListItemAvatar>{chat.avatar ? <Avatar src={chat.avatar.url} alt="chat-avatar" sx={{ width: 60, height: 60 }} /> : <Avatar>{chat.title[0]}</Avatar>}</ListItemAvatar>
            < ListItemText primary={chat.title} />
            {chat.lastModified && <ReactTimeAgo date={+(chat.lastModified)} locale="ru" timeStyle="round" />}
        </ListItem >
    )
}