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();

  if (isLoading) {
    return (
      <nav className="navigation">
        <div className="nav-brand">
          <Link to="/">Container Mom</Link>
        </div>
        <div className="nav-loading">Loading...</div>
      </nav>
    );
  }

  return (
    <nav className="navigation">
      <div className="nav-brand">
        <Link to="/">Container Mom</Link>
      </div>
      {isAuthenticated ? (
        <div className="nav-user">
          <div className="user-menu">
            <button className="user-button">
              {user?.name || user?.email}
              <span className="arrow">▼</span>
            </button>
            <div className="dropdown-menu">
              <Link to="/profile">Profile</Link>
              <button onClick={() => logout({ 
                returnTo: window.location.origin 
              })}>
                Log Out
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="nav-auth">
          <button onClick={() => loginWithRedirect()} className="login-btn">
            Log In
          </button>
          <button 
            onClick={() => loginWithRedirect({ screen_hint: 'signup' })} 
            className="signup-btn"
          >
            Sign Up
          </button>
        </div>
      )}
    </nav>
  );
}

export default Navigation; 