import './Header.css';
import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { UserContext } from '../../context/UserContext.jsx';
import { clearSession } from '../../utils/session.js';
import { clearActiveStation } from '../../utils/activeStation.js';

export default function Header() {
    const navigate = useNavigate();
    const { user, setUser } = useContext(UserContext);

    function handleLogout() {
        clearSession();
        clearActiveStation();
        setUser(null);
        navigate('/login', { replace: true });
    }

    return (
        <header className="main-header">
            <h2 className="header-logo" onClick={() => navigate(user ? '/' : '/login')}>
                MyKOPKB QMS-Teller
            </h2>
            {user ? (
                <div className="header-user">
                    <span className="header-email">{user.email}</span>
                    <button type="button" className="header-logout-btn" onClick={handleLogout}>
                        Logout
                    </button>
                </div>
            ) : null}
        </header>
    );
}
