// src/components/Navbar.jsx
import { NavLink, useNavigate } from "react-router-dom";
import { useAuth } from "../../context/AuthContext.jsx";
import "./Navbar.css"; // estilos separados

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

  const handleLogout = () => {
    logout();
    navigate("/"); // 👈 al cerrar sesión vuelve al Login
  };

  return (
    <header className="navbar">
      <div className="navbar__brand"></div>

      <div className="navbar__actions">
        {isAuthenticated ? (
          <button className="btn btn--secondary" onClick={handleLogout}>
            Logout
          </button>
        ) : (
          <NavLink to="/" className="btn btn--primary">
            Login
          </NavLink>
        )}
      </div>
    </header>
  );
}