"use client";

import Link from "next/link";
import type { NavItem } from "@public-web-portals/shared";

export function MobileNav({
  items,
  open,
  onClose,
}: {
  items: NavItem[];
  open: boolean;
  onClose: () => void;
}) {
  if (!open) return null;

  return (
    <nav
      id="mobile-nav"
      className="md:hidden border-t border-neutral-200 bg-white px-4 py-4"
      aria-label="Mobile navigation"
    >
      <ul className="space-y-1">
        {items.map((item) => (
          <li key={item.href}>
            {item.children ? (
              <>
                <span className="block px-3 py-2 text-sm font-semibold text-neutral-900">{item.label}</span>
                <ul className="ml-4 space-y-1 border-l border-neutral-200 pl-4">
                  {item.children.map((child) => (
                    <li key={child.href}>
                      <Link
                        href={child.href}
                        className="block px-3 py-2 text-sm text-neutral-600 hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset rounded"
                        onClick={onClose}
                      >
                        {child.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </>
            ) : (
              <Link
                href={item.href}
                className="block rounded px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset"
                onClick={onClose}
              >
                {item.label}
              </Link>
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}