import { FC } from 'react'
import Input from '../../UI/Input';
import { BsSearch } from '@react-icons/all-files/bs/BsSearch'
import Chat from './Chat';
import { useAppSelector } from '../../../hooks/redux';

const Chats: FC = () => {
    const { chats } = useAppSelector(state => state.MessengerSlice)

    return (
        <div className='w-80 bg-gray-800 pt-10 pb-5 flex flex-col'>
            <div className="px-5 border-b-[1px] border-b-gray-700 pb-5 mb-2">
                <h1 className='text-white font-semibold text-2xl mb-4'>Chats</h1>
                <Input icon={<BsSearch/>} type='text' className='!py-2' placeholder='Search...'/>
            </div>
            <div className="flex flex-col overflow-y-auto custom-scroll">
                {chats.map(chat=>
                    <Chat key={chat._id} data={chat}/>
                )}
            </div>
        </div>
    )
}

export default Chats;