import React from 'react';
import { useAppContext } from './app';
import { Link } from 'react-router-dom';

const Navbar: React.FC = () => {
    const {state, redirect} = useAppContext() as any;

    return (
        <div id="nav-bar" className="w100 gap flex jsb">
            <div className="logo">
               <img src="https://via.placeholder.com/150" alt="logo" />
            </div>
            <div className="login-status">
               {state.token ? <button onClick={() => {
                    localStorage.removeItem('token');
                    redirect('/login')
               }}>Log Out</button> : <Link to="/login"><button>Log In</button></Link>}
            </div>
        </div>
    );
};

export default Navbar;