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

function WishlistButton({ productId }: { productId: string }) {
  const { isInWishlist, toggle } = useWishlist();
  const saved = isInWishlist(productId);

  return (
    <TouchableOpacity onPress={() => toggle(productId)}>
      <HeartIcon filled={saved} />
    </TouchableOpacity>
  );
}

function WishlistScreen() {
  const { items, remove } = useWishlist();

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <WishlistItemCard
          productId={item.productId}
          addedAt={item.addedAt}
          onRemove={() => remove(item.productId)}
        />
      )}
    />
  );
}

function useWishlist(): {
  items: { productId: string; addedAt: string }[];
  isInWishlist: (productId: string) => boolean;
  toggle: (productId: string) => Promise<void>;
  add: (productId: string) => Promise<void>;
  remove: (productId: string) => Promise<void>;
}

const { wishlist } = useStackfront();

await wishlist.add(productId);
await wishlist.remove(productId);
await wishlist.toggle(productId);
wishlist.isInWishlist(productId);
wishlist.getItems();