import { useState } from "react";
import { Link } from "react-router-dom";
import { Menu, X, User } from "lucide-react";
import { useAuth } from "../Bejel_Regisz/AuthContext";

export default function Menusor() {
  const [menuOpen, setMenuOpen] = useState(false);
  const { user, logout } = useAuth();

  if (!user) {
    return (
      <nav className="bg-yellow-200 text-amber-900 py-4 px-6 flex justify-between items-center shadow-md sticky top-0 w-full z-50">
        <Link to="/" className="text-2xl font-bold flex items-center">
          <img src="/Logo.png" alt="PeePal Logo" className="h-14 ml-2 hover:h-15" />
        </Link>

        <button
          className="md:hidden text-amber-900"
          onClick={() => setMenuOpen(!menuOpen)}
        >
          {menuOpen ? <X size={32} /> : <Menu size={32} />}
        </button>

        <ul
          className={`md:flex md:space-x-6 md:items-center text-lg ${
            menuOpen
              ? "absolute top-16 left-0 w-full bg-yellow-200 flex flex-col items-center space-y-4 py-4 shadow-lg"
              : "hidden md:flex"
          }`}
        >
          <li>
            <Link 
              to="/kereso" 
              className="hover:bg-yellow-500 px-4 py-2 rounded-lg transition"
              onClick={() => setMenuOpen(false)}
            >
              Legközelebbi mosdó
            </Link>
          </li>
          <li className="hidden md:block border-l-2 border-amber-800 h-10"></li>
          <li>
            <Link 
              to="/bejelentkezes" 
              className="hover:bg-yellow-500 px-4 py-2 rounded-lg transition"
              onClick={() => setMenuOpen(false)}
            >
              Bejelentkezés
            </Link>
          </li>
          <li>
            <Link 
              to="/regisztracio" 
              className="hover:bg-yellow-500 px-4 py-2 rounded-lg transition"
              onClick={() => setMenuOpen(false)}
            >
              Regisztráció
            </Link>
          </li>
        </ul>
      </nav>
    );
  } else {
    return (
      <nav className="bg-yellow-200 text-amber-900 py-4 px-6 flex justify-between items-center shadow-md sticky top-0 w-full z-50">
        <Link to="/" className="text-2xl font-bold flex items-center">
          <img src="/Logo.png" alt="PeePal Logo" className="h-14 ml-2 hover:h-15" />
        </Link>

        <button
          className="md:hidden text-amber-900"
          onClick={() => setMenuOpen(!menuOpen)}
        >
          {menuOpen ? <X size={32} /> : <Menu size={32} />}
        </button>

        <ul
          className={`md:flex md:space-x-6 md:items-center text-lg ${
            menuOpen
              ? "absolute top-16 left-0 w-full bg-yellow-200 flex flex-col items-center space-y-4 py-4 shadow-lg"
              : "hidden md:flex"
          }`}
        >
          <li>
            <Link 
              to="/kereso" 
              className="hover:bg-yellow-500 px-4 py-2 rounded-lg transition"
              onClick={() => setMenuOpen(false)}
            >
              Legközelebbi mosdó
            </Link>
          </li>
          <li className="hidden md:block border-l-2 border-amber-800 h-10"></li>
          <li>
            <button
              onClick={() => {
                logout();
                setMenuOpen(false);
              }}
              className="hover:bg-yellow-500 px-4 py-2 rounded-lg transition"
            >
              Kijelentkezés
            </button>
          </li>
          <li className="flex items-center space-x-2 px-4 py-2">
            <User size={20} />
            <span>{user.felh_nev}</span>
          </li>
        </ul>
      </nav>
    );
  }
}
