"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ReactNode } from "react";

export type NavItem = { href: string; label: string; icon: ReactNode };

export function NavList({ items }: { items: NavItem[] }) {
  const pathname = usePathname();
  return (
    <nav className="flex gap-1 overflow-x-auto px-2 pb-1 lg:flex-col lg:overflow-visible lg:px-0 lg:pb-0">
      {items.map((it) => {
        const active = pathname === it.href || (it.href !== "/" && it.href.split("/").length <= 2 ? pathname === it.href : pathname.startsWith(it.href));
        return (
          <Link key={it.href} href={it.href}
            className={`flex shrink-0 items-center gap-2.5 rounded-xl px-3.5 py-2.5 text-[13px] font-bold transition ${
              active
                ? "bg-gradient-to-l from-emerald-700 to-emerald-900 text-white shadow-md shadow-emerald-900/25"
                : "text-emerald-900/70 hover:bg-emerald-900/5 hover:text-emerald-950"
            }`}>
            <span className={active ? "text-amber-300" : "text-emerald-700/70"}>{it.icon}</span>
            {it.label}
          </Link>
        );
      })}
    </nav>
  );
}