import { FC } from 'react'
import { IChat  } from '../../../models/IChat';
import { Link } from 'react-router-dom';
//import { useLocation  } from 'react-router-dom';

interface ChatProps {
    data: IChat
}

const Chat: FC<ChatProps>= ({data}) => {
   // const location = useLocation();

    return (
        <Link to='/messenger' className={['p-5 flex w-full items-center relative hover:bg-gray-700', ''].join(' ')}>
            <div className={['w-12 h-12 min-w-[48px] mr-3 relative', data.isOnline ? 'before:absolute before:w-4 before:h-4 before:bg-green-400 before:rounded-full before:bottom-0 before:right-0 before:border-[3px] before:border-gray-800' : null].join(' ')}>
                <img className='rounded-full w-[inherit] h-[inherit]' src={data.avatar} alt="avatar"/>
            </div>
            <div className="flex flex-col items-start overflow-hidden">
                <h2 className='text-white font-medium mb-1'>{data.name + ' ' + data.sname}</h2>
                <p className='text-gray-500 text-sm max-w-[200px] whitespace-nowrap overflow-hidden text-ellipsis'>{data.lastmsg.msg}</p>
            </div>
            <span className="text-sm text-gray-500 absolute right-4 top-4">{data.lastmsg.time}</span>
            {data.unreaded > 0 &&
                <span className='bg-apricot rounded-full text-sm flex items-center justify-center min-w-[20px] text-gray-800 font-semibold h-5 absolute bottom-[22px] right-4'>{data.unreaded}</span>
            }
        </Link>
    )
}

export default Chat;