import { useRef, type ReactNode } from "react";
import { useListNav } from "../../lib/listNav";

// A plain grid of cards the keyboard can walk — `j`/`k`, the arrows, Enter (lib/listNav) — for the
// grids that mount every item (the Plex title, season and episode grids). Nothing to count: the items
// and the columns per row are measured when a key is pressed, so an auto-fill grid's columns follow
// its width. Each child spreads `navItemAttrs(index)` on its root; a virtualized grid is VirtualGrid's
// `keyboardNav` instead.
export default function NavGrid({
  className,
  children,
}: {
  className?: string;
  children: ReactNode;
}) {
  const ref = useRef<HTMLDivElement>(null);
  useListNav(ref, { enabled: true });
  return (
    <div ref={ref} className={className}>
      {children}
    </div>
  );
}