import { FC } from 'react'
import MenuItem from './MenuItem';
import { Link } from 'react-router-dom';
import { logout } from "../../../store/reducers/UserSlice";
import { useAppDispatch } from "../../../hooks/redux"

const Menu: FC = () => {

    const dispatch = useAppDispatch();

    const logoutHandler = async () => {
        await dispatch(logout());
    }

    return (
        <nav>
            <ul className='border-b pb-5'>
                <MenuItem to='/'>Главная</MenuItem>
                <MenuItem to='/1'>Мессенджер</MenuItem>
                <MenuItem to='/2'>Программа</MenuItem>
                <MenuItem to='/3'>Онлайн урок</MenuItem>
                <MenuItem to='/4'>Домашнее задание</MenuItem>
                <MenuItem to='/5'>Тренировка</MenuItem>
                <MenuItem to='/6'>Лиги</MenuItem>
                <MenuItem to='/7'>Турнир</MenuItem>
            </ul>
            <ul className='pt-5'>
                <li className='mb-2'><Link to='/' className='text-slate-400'>Настройки</Link></li>
                <li className='mb-2 text-slate-400 cursor-pointer' onClick={ () => void logoutHandler() }>Выход</li>
            </ul>
        </nav>
    )
}

export default Menu;