"use client";
// Sous-navigation horizontale du tableau de bord d'administration.
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/components/ui";

const ITEMS = [
  { href: "/admin", label: "Vue générale" },
  { href: "/admin/cours", label: "Cours & contenu" },
  { href: "/admin/modeles", label: "Modèles" },
  { href: "/admin/pedagogie", label: "Pédagogie" },
  { href: "/admin/prompts", label: "Prompts" },
  { href: "/admin/annonces", label: "Annonces" },
  { href: "/admin/securite", label: "Sécurité" },
  { href: "/admin/parametres", label: "Paramètres" },
];

export function AdminNav() {
  const pathname = usePathname();
  const isActive = (href: string) => (href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(href + "/"));
  return (
    <div className="sticky top-0 z-30 border-b border-app bg-app/95 backdrop-blur">
      <nav aria-label="Administration" className="flex gap-1 overflow-x-auto px-4 py-2 md:px-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {ITEMS.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            aria-current={isActive(item.href) ? "page" : undefined}
            className={cn(
              "whitespace-nowrap rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors",
              isActive(item.href)
                ? "bg-brand-100 text-brand-700 dark:bg-brand-900/60 dark:text-brand-200"
                : "text-muted hover:bg-surface-2 hover:text-fg dark:hover:bg-brand-900/30"
            )}
          >
            {item.label}
          </Link>
        ))}
      </nav>
    </div>
  );
}