import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, Image } from 'react-native';

const ProductList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts().then((data) => setProducts(data.products.edges));
  }, []);

  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.node.id}
      renderItem={({ item }) => (
        <View>
          <Image source={{ uri: item.node.images.edges[0].node.transformedSrc }} style={{ width: 100, height: 100 }} />
          <Text>{item.node.title}</Text>
          <Text>{item.node.variants.edges[0].node.priceV2.amount}</Text>
        </View>
      )}
    />
  );
};