"use client";

/** منوی پنل؛ فقط بخش‌هایی که کاربر به آن‌ها دسترسی دارد */
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { ADMIN_SECTIONS, type AdminSection } from "@/lib/admin-sections";

export function AdminNav({ sections }: { sections: AdminSection[] }) {
  const pathname = usePathname();
  const items = [
    ...ADMIN_SECTIONS.filter((s) => sections.includes(s.key)),
    ...(sections.includes("team") ? [{ key: "team", label: "تیم و دسترسی‌ها", href: "/admin/team", icon: "user" } as const] : []),
  ];
  return (
    <nav aria-label="منوی مدیریت" className="scrollbar-none flex gap-1 overflow-x-auto px-3 pb-2 md:flex-col md:overflow-visible md:px-3 md:pb-0">
      {items.map((i) => {
        const active = i.href === "/admin" ? pathname === "/admin" : pathname.startsWith(i.href);
        return (
          <Link
            key={i.href}
            href={i.href}
            aria-current={active ? "page" : undefined}
            className={`flex shrink-0 items-center gap-3 rounded-xl px-3 py-2 text-sm whitespace-nowrap ${active ? "bg-ink text-paper" : "text-ink-soft hover:bg-mist"}`}
          >
            <Icon name={i.icon} size={18} />
            {i.label}
          </Link>
        );
      })}
    </nav>
  );
}