"use client";

import {
  LayoutDashboard,
  Users,
  Server,
  Radio,
  ScrollText,
  ShieldCheck,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

type NavItem = {
  href: string;
  label: string;
};

export function AdminNav({ items }: { items: NavItem[] }) {
  const pathname = usePathname();
  const icons: Record<string, typeof Server> = {
    "/admin/dashboard": LayoutDashboard,
    "/admin/users": Users,
    "/admin/nodes": Server,
    "/admin/certificates": ShieldCheck,
    "/admin/subscriptions": Radio,
    "/admin/audits": ScrollText,
  };

  return (
    <nav className="nav-list">
      {items.map((item) => {
        const Icon = icons[item.href] ?? Server;
        const active =
          pathname === item.href || pathname.startsWith(`${item.href}/`);

        return (
          <Link
            key={item.href}
            href={item.href}
            aria-current={active ? "page" : undefined}
            className={`nav-link ${active ? "is-active" : ""}`}
          >
            <Icon size={16} aria-hidden="true" />
            <span className="nav-link__label">{item.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}