import React from 'react';
import { Link } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import './Navigation.css';

function Navigation() {
  const { user, isAuthenticated, isLoading, loginWithRedirect, logout } = useAuth0();

  console.log('Auth state:', { isAuthenticated, isLoading, user }); // Debug log

  return (
    <nav className="navigation">
      <div className="nav-brand">
        <Link to="/">Container Mom</Link>
      </div>
      {isLoading ? (
        <div>Loading...</div>
      ) : isAuthenticated ? (
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log Out ({user?.email})
        </button>
      ) : (
        <button onClick={() => loginWithRedirect()}>Log In</button>
      )}
    </nav>
  );
}

export default Navigation; 