import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { logout, isAuthenticated, getCurrentUser } from '../api/auth';

const Navbar: React.FC = () => {
  const navigate = useNavigate();
  const authenticated = isAuthenticated();
  const user = getCurrentUser();

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

  return (
    <nav className="navbar">
      <div className="navbar-brand">
        <Link to="/">App Recettes</Link>
      </div>

      <div className="navbar-menu">
        {authenticated ? (
          <>
            <Link to="/recipes" className="navbar-item">Mes recettes</Link>
            <Link to="/recipes/new" className="navbar-item">Nouvelle recette</Link>
            <div className="navbar-item user-info">
              {user?.name || user?.email}
              <span className="badge">{user?.subscription}</span>
            </div>
            <button onClick={handleLogout} className="navbar-item logout-btn">
              Déconnexion
            </button>
          </>
        ) : (
          <>
            <Link to="/login" className="navbar-item">Connexion</Link>
            <Link to="/register" className="navbar-item">Inscription</Link>
          </>
        )}
      </div>
    </nav>
  );
};

export default Navbar; 