"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import type { NavLink } from "@/lib/types";

export default function NavItem({ item }: { item: NavLink }) {
  const pathname = usePathname();
  const active = item.href === "/" ? pathname === "/" : pathname?.startsWith(item.href);

  return (
    <div className="relative group">
      <Link
        href={item.href}
        className={`pb-0.5 border-b-2 transition-colors ${
          active ? "border-accent-500 text-ink" : "border-transparent text-neutral-600 hover:text-ink"
        }`}
      >
        {item.label}
      </Link>
      {item.children && item.children.length > 0 ? (
        <div className="absolute left-0 top-full hidden group-hover:block pt-3 normal-case">
          <div className="rounded-lg border border-divider bg-bg shadow-lg py-2 min-w-[180px]">
            {item.children.map((child) => (
              <Link
                key={child.href}
                href={child.href}
                className="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 hover:text-ink"
              >
                {child.label}
              </Link>
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}