import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import './Navigation.css';

function Navigation() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

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

  return (
    <nav className="navigation">
      <div className="nav-brand">
        <Link to="/">Container Mom</Link>
      </div>
      {user ? (
        <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={handleLogout}>Log Out</button>
            </div>
          </div>
        </div>
      ) : (
        <div className="nav-auth">
          <Link to="/login">Log In</Link>
          <Link to="/signup" className="signup-btn">Sign Up</Link>
        </div>
      )}
    </nav>
  );
}

export default Navigation; 