'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {Heading} from '@astryxdesign/core/Text';
import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';

/**
 * A labelled region wrapping a grid of entity cards.
 *
 * The card grids (stores, rewards, staff) are visually self-explanatory — the
 * filter bar above already says "5 stores" — so they carry no visible heading.
 * But each card titles itself with an h3, and an h3 with no h2 above it is a
 * hole in the document outline: screen-reader users navigating by heading jump
 * from the page title straight into individual cards with no sense of what
 * collection they are in.
 *
 * So the heading exists, and is hidden. This is one of the few legitimate uses
 * of visually-hidden text: the information is genuinely redundant for sighted
 * users and genuinely missing for everyone else.
 */
export function CollectionRegion({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <VStack gap={4} as="section">
      <VisuallyHidden>
        <Heading level={2}>{label}</Heading>
      </VisuallyHidden>
      {children}
    </VStack>
  );
}