const products = await tagada.catalog.getProducts();

const filtered = await tagada.catalog.getProducts({
  productIds: ['prod_xxx'],
  variantIds: ['var_xxx'],
});

const product = await tagada.catalog.getProduct('prod_xxx');
// Returns CatalogProduct or null if not found

interface CatalogProduct {
  id: string;
  name: string;
  description?: string;
  active: boolean;
  variants: CatalogVariant[];
}

interface CatalogVariant {
  id: string;
  productId: string;
  name: string;
  description?: string;
  sku?: string;
  price?: number;
  currency?: string;
  compareAtPrice?: number;
  imageUrl?: string;
  active: boolean;
  inStock: boolean;
  prices: CatalogPrice[];
}

interface CatalogPrice {
  id: string;
  variantId?: string;
  default: boolean;
  currencyOptions: Record<string, { amount: number; compareAtAmount?: number }>;
  recurring: boolean;
  interval?: string;       // 'day', 'month', 'year'
  intervalCount?: number;
}

import { useCatalog } from '@tagadapay/headless-sdk/react';

function ProductList() {
  const { products, isLoading, error, loadProducts, loadProduct } = useCatalog();

  useEffect(() => {
    loadProducts();
  }, [loadProducts]);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          {product.variants.map((v) => (
            <div key={v.id}>
              {v.imageUrl && <img src={v.imageUrl} alt={v.name} />}
              <span>{v.name}</span>
              <span>{(v.prices[0]?.currencyOptions.USD?.amount ?? 0) / 100} USD</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}