"use client";

import { useRef } from "react";

export function MobileNav({ items }: { items: ReadonlyArray<readonly [string, string]> }) {
  const details = useRef<HTMLDetailsElement>(null);
  const close = () => details.current?.removeAttribute("open");

  return (
    <details className="mobile-nav" ref={details}>
      <summary>Menu</summary>
      <nav aria-label="Mobile navigation">
        {items.map(([label, href]) => <a href={href} key={href} onClick={close}>{label}</a>)}
        <a href="/release-readiness" onClick={close}>Release status</a>
      </nav>
    </details>
  );
}
