import React, { useContext } from 'react'
import './Header.css';
import {Axios, UserCtx, UserCtxT} from '../context/UserContext';
import { useNavigate } from 'react-router-dom';


function Header() {
    const {setUser} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
    const navigate = useNavigate();

    const logOut = () =>
    {
        Axios.post('logout.php')
        .then((res) =>
        {
            console.log(res);    
        })
        .catch((err) => console.error(err));

        setUser(null);
        
        navigate('/'); // login      
    }
    
    return (
    <div className='logout'>
        <div>Header</div>
        <button onClick={logOut}>Logout</button>
    </div>
  );
}

export default Header;