// Navigation bar. Port of the Angular NavbarComponent: routerLink
// becomes react-router's <Link>, and the *ngIf toggles on
// isLoggedIn() become plain JSX conditional rendering driven by the
// useAuth() hook.
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function Navbar() {
  const { isLoggedIn, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  return (
    <nav className="navbar navbar-expand navbar-light bg-light">
      <Link className="navbar-brand" to="/">
        <img src="/assets/images/logo.png" alt="Travlr Getaways logo" />
      </Link>
      <div className="collapse navbar-collapse">
        <div className="navbar-nav">
          <Link className="nav-link active" to="/">
            Trips
          </Link>
        </div>
      </div>
      <div className="navbar-end">
        {!isLoggedIn ? (
          <Link className="nav-item" to="/login">
            <span className="has-icon-left">Log In</span>
          </Link>
        ) : (
          <button
            type="button"
            className="nav-item active btn btn-link"
            onClick={handleLogout}
          >
            <span className="has-icon-left">Log Out</span>
          </button>
        )}
      </div>
    </nav>
  );
}
