'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {PageHeader} from '@/shared/components/primitives/PageHeader';
import {StoreGrid} from '@/features/stores/components/StoreGrid';
import {useStoreList} from '@/features/stores/hooks/useStores';
import {
  RANGE_LABELS,
  useWorkspace,
} from '@/shared/providers/WorkspaceProvider';
import {ScopeControls} from '@/shared/components/scope/ScopeControls';

/**
 * The store roster.
 *
 * This page deliberately ignores the shared STORE scope — a list of every
 * store is the whole point, and narrowing it to the one already selected would
 * leave a one-card page. The RANGE scope still applies, because the totals on
 * each card have to be measured over some period.
 */
export default function StoresPage() {
  const {range} = useWorkspace();
  const stores = useStoreList();

  return (
    <VStack gap={5}>
      <PageHeader
        title="Store"
        description={`Performance and status for every store in the network, over ${RANGE_LABELS[range].toLowerCase()}.`}
        controls={<ScopeControls hasStore={false} />}
      />
      <StoreGrid resource={stores} />
    </VStack>
  );
}