the-tip-top-frontend/components/Navbar.tsx

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/contexts/AuthContext";
import { NAV_ITEMS, ROUTES } from "@/utils/constants";
import { useState } from "react";
import Button from "./Button";

export default function Navbar() {
  const { user, isAuthenticated, logout, isLoading } = useAuth();
  const pathname = usePathname();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const filteredNavItems = NAV_ITEMS.filter((item) => {
    if (!user) return false;
    return item.roles.includes(user.role);
  });

  const isActive = (href: string) => pathname === href;

  const handleLogout = async () => {
    await logout();
    setMobileMenuOpen(false);
  };

  return (
    <nav className="bg-white border-b shadow-sm sticky top-0 z-50">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link
            href="/"
            className="flex items-center text-2xl font-bold text-blue-600 hover:text-blue-700 transition-colors"
          >
            🍵 Thé Tip Top
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-6">
            {isAuthenticated && filteredNavItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={`text-sm font-medium transition-colors ${
                  isActive(item.href)
                    ? "text-blue-600 border-b-2 border-blue-600"
                    : "text-gray-700 hover:text-blue-600"
                }`}
              >
                {item.label}
              </Link>
            ))}

            {!isLoading && (
              <>
                {!isAuthenticated ? (
                  <div className="flex items-center space-x-3">
                    <Link href={ROUTES.LOGIN}>
                      <Button variant="outline" size="sm">
                        Connexion
                      </Button>
                    </Link>
                    <Link href={ROUTES.REGISTER}>
                      <Button size="sm">Inscription</Button>
                    </Link>
                  </div>
                ) : (
                  <div className="flex items-center space-x-4">
                    <div className="text-sm text-gray-700">
                      <span className="font-medium">{user?.firstName} {user?.lastName}</span>
                      <span className="block text-xs text-gray-500">{user?.email}</span>
                    </div>
                    <Button variant="outline" size="sm" onClick={handleLogout}>
                      Déconnexion
                    </Button>
                  </div>
                )}
              </>
            )}
          </div>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden p-2 rounded-md text-gray-700 hover:bg-gray-100"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            aria-label="Menu mobile"
          >
            <svg
              className="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              {mobileMenuOpen ? (
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              ) : (
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16M4 18h16"
                />
              )}
            </svg>
          </button>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden py-4 border-t">
            <div className="flex flex-col space-y-3">
              {isAuthenticated && filteredNavItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                    isActive(item.href)
                      ? "bg-blue-50 text-blue-600"
                      : "text-gray-700 hover:bg-gray-50"
                  }`}
                  onClick={() => setMobileMenuOpen(false)}
                >
                  {item.label}
                </Link>
              ))}

              {!isLoading && (
                <>
                  {!isAuthenticated ? (
                    <>
                      <Link
                        href={ROUTES.LOGIN}
                        onClick={() => setMobileMenuOpen(false)}
                      >
                        <Button variant="outline" size="sm" fullWidth>
                          Connexion
                        </Button>
                      </Link>
                      <Link
                        href={ROUTES.REGISTER}
                        onClick={() => setMobileMenuOpen(false)}
                      >
                        <Button size="sm" fullWidth>
                          Inscription
                        </Button>
                      </Link>
                    </>
                  ) : (
                    <>
                      <div className="px-3 py-2 text-sm border-t pt-3">
                        <span className="font-medium text-gray-900">
                          {user?.firstName} {user?.lastName}
                        </span>
                        <span className="block text-xs text-gray-500 mt-1">
                          {user?.email}
                        </span>
                      </div>
                      <Button
                        variant="outline"
                        size="sm"
                        fullWidth
                        onClick={handleLogout}
                      >
                        Déconnexion
                      </Button>
                    </>
                  )}
                </>
              )}
            </div>
          </div>
        )}
      </div>
    </nav>
  );
}