"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, LayoutGrid, Package, User, Settings } from "lucide-react";
import { cn } from "@/lib/utils";

export default function ClientNav({ isAdmin }: { isAdmin: boolean }) {
  const pathname = usePathname();

  const items = [
    { href: "/catalogue", label: "Catalogue", icon: Home },
    { href: "/catalogue/assiste", label: "Recherche", icon: LayoutGrid },
    { href: "/commandes", label: "Commandes", icon: Package },
    { href: "/compte", label: "Compte", icon: User },
  ];

  if (isAdmin) items.push({ href: "/admin", label: "Admin", icon: Settings });

  return (
    <nav className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 safe-bottom">
      <ul className="container grid grid-cols-5 gap-1 py-2">
        {items.map((item) => {
          const active =
            pathname === item.href ||
            (item.href !== "/catalogue" && pathname.startsWith(item.href));
          const Icon = item.icon;
          return (
            <li key={item.href}>
              <Link
                href={item.href}
                className={cn(
                  "flex flex-col items-center gap-0.5 rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors",
                  active
                    ? "text-primary"
                    : "text-muted-foreground hover:text-foreground"
                )}
              >
                <Icon className={cn("h-5 w-5", active && "stroke-[2.5]")} />
                <span>{item.label}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}