import { useProducts } from 'react-native-stackfront-sdk';
import { FlashList } from '@shopify/flash-list';

function ProductGrid() {
  const { data, loading, refetch } = useProducts({ first: 20 });

  if (loading && !data) return <Loading />;

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

  return (
    <FlashList
      data={products}
      renderItem={({ item }) => <ProductCard product={item.node} />}
      estimatedItemSize={300}
      onEndReached={() => {
        if (data?.pageInfo?.hasNextPage) {
          const lastCursor = products[products.length - 1]?.cursor;
          // Refetch with cursor for next page
        }
      }}
      onRefresh={refetch}
      refreshing={loading}
    />
  );
}

function useProducts(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>;
}