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

function ProductSocialProof({ productId }: { productId: string }) {
  const { signals, loading, trackView } = useSocialProof(productId);

  useEffect(() => {
    trackView(); // track that the current user viewed this product
  }, [trackView]);

  if (loading || !signals) return null;

  return (
    <View>
      {signals.currentViewers > 0 && (
        <Text>{signals.currentViewers} people viewing now</Text>
      )}
      {signals.recentPurchases > 0 && (
        <Text>{signals.recentPurchases} bought in the last hour</Text>
      )}
    </View>
  );
}

function useSocialProof(productId: string): {
  signals: SocialProofSignalsResponse | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
  trackView: () => Promise<void>;
}

const { socialProof } = useStackfront();

await socialProof.trackProductView({ productId, oneSignalPlayerId });
await socialProof.getSignals(productId);