import { useProduct, useCart } from 'react-native-stackfront-sdk';

function ProductScreen({ handle }: { handle: string }) {
  const { data: product, loading, error } = useProduct(handle);
  const { addLine } = useCart();

  if (loading) return <Loading />;
  if (error) return <Error message={error.message} />;
  if (!product) return <NotFound />;

  return (
    <ScrollView>
      <ImageSlider images={product.images?.edges?.map(e => e.node)} />
      <Text style={typography.h1}>{product.title}</Text>
      <Text>{product.description}</Text>
      <Price price={product.priceRange?.minVariantPrice} />
      {product.variants?.edges?.map(({ node }) => (
        <VariantRow key={node.id} variant={node} onSelect={() => addLine(node.id, 1)} />
      ))}
    </ScrollView>
  );
}

function useProduct(handle: string): {
  data: unknown;           // full product shape
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

const { products } = useStackfront();
const product = await products.getProductById('gid://shopify/Product/123');

const { addLine } = useCart();
addLine(variantId, 1);