import { FC } from 'react';
import MenuItem from './MenuItem';
import { BsChatText } from '@react-icons/all-files/bs/BsChatText';
import { BsTelephone } from '@react-icons/all-files/bs/BsTelephone'
import { BsGear } from '@react-icons/all-files/bs/BsGear'
import { useAppSelector } from '../../../hooks/redux';

const Menu: FC = () => {

    const { user } = useAppSelector(state=> state.UserSlice);

    return (
        <nav className='flex flex-col h-full items-center'>
            <ul className='border-b border-b-gray-600 pb-8 flex flex-col items-center'>
                <MenuItem to='/messenger'><BsChatText/></MenuItem>
                <MenuItem className='mb-0' to='/messenger/1'><BsTelephone/></MenuItem>
            </ul>
            <ul className='pt-8 flex flex-col flex-grow items-center'>
                <MenuItem to='/messenger/2'><BsGear/></MenuItem>
            </ul>
            <div className="w-9 h-9 rounded-full">
                <img src={user.avatar} className='w-[inherit] h-[inherit]' alt="avatar" />
            </div>
        </nav>
    )
}

export default Menu;