import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

const Navbar = ({ onLogout, currentUser }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(prev => !prev);
  };

  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  return (
    <nav className="navbar">
      <div className="navbar-logo">
        <Link to="/">
          <h1>XAVA</h1>
        </Link>
      </div>

      <div
        className={`navbar-hamburger ${isMenuOpen ? 'open' : ''}`}
        onClick={toggleMenu}
      >
        <div className="bar"></div>
        <div className="bar"></div>
        <div className="bar"></div>
      </div>

      <div className={`navbar-links ${isMenuOpen ? 'active' : ''}`}>
        <span className="navbar-user">
          {/* TODO: Username aus Backend/API holen und anzeigen.
              Tipp: `currentUser?.username` nutzen oder bei App-Start `/api/users/me` laden. */}
          User: {currentUser?.username || 'TODO_USERNAME'}
        </span>
        <Link to="/" onClick={closeMenu}>Home</Link>
        <Link to="/profile" onClick={closeMenu}>Profile</Link>
        <Link to="/create-post" onClick={closeMenu}>Create Post</Link>
        <Link
          to="/"
          onClick={() => {
            closeMenu();
            onLogout();
          }}
        >
          Logout
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;
