import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import '../styles/navbar.css';

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

  function handleLogout() {
    logout();
    navigate('/login');
  }

  return (
    <nav className="navbar">
      <Link to="/" className="navbar__logo">Biblio</Link>

      <ul className="navbar__links">
        <li><Link to="/">Accueil</Link></li>
        <li><Link to="/books">Catalogue</Link></li>
        {user && <li><Link to="/orders">Commandes</Link></li>}
        {user?.role === 'user' && <li><Link to="/reservations">Mes réservations</Link></li>}
        {user && <li><Link to="/profile">Mon compte</Link></li>}
        {user?.role === 'admin' && <li><Link to="/customers">Clients</Link></li>}
      </ul>

      <div className="navbar__actions">
        {user ? (
          <>
            <span>{user.username} ({user.role})</span>
            <button onClick={handleLogout}>Déconnexion</button>
          </>
        ) : (
          <Link to="/login"><button>Connexion</button></Link>
        )}
      </div>
    </nav>
  );
}