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

// A plain list of cards or rows the keyboard can walk — `j`/`k`, the arrows, Enter (lib/listNav) — for
// the lists that mount every item (the Plex title, season and episode grids, the download lists, a
// playlist's table body). 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 and a column of rows is one per row.
// Each child spreads `navItemAttrs(index)` on its root; a virtualized grid is VirtualGrid's
// `keyboardNav` instead. `as="tbody"` for a table whose rows are the items.
export default function NavGrid({
  as: Tag = "div",
  className,
  children,
}: {
  as?: "div" | "tbody";
  className?: string;
  children: ReactNode;
}) {
  const ref = useRef<HTMLDivElement & HTMLTableSectionElement>(null);
  useListNav(ref, { enabled: true });
  return (
    <Tag ref={ref} className={className}>
      {children}
    </Tag>
  );
}