import { useCollections } from 'react-native-stackfront-sdk';

function CollectionGrid() {
  const { data, loading } = useCollections({ first: 20 });

  if (loading) return <Loading />;

  const collections = data?.edges ?? [];

  return (
    <FlashList
      data={collections}
      renderItem={({ item }) => (
        <CollectionCard
          title={item.node.title}
          description={item.node.description}
          image={item.node.image}
          onPress={() => navigateToProducts(item.node.handle)}
        />
      )}
      estimatedItemSize={200}
    />
  );
}

function useCollections(options?: {
  first?: number;   // items per page (default 20)
  after?: string;   // cursor for pagination
}): {
  data: unknown;           // GraphQL connection shape
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

const { products } = useStackfront();
const collection = await products.getCollection('summer-collection');
// collection.products?.edges contains the product list