<MoonPayGooglePayButton />

import React from "react";
import {
  MoonPayGooglePayButton,
  MoonPayChallenge,
  type GooglePayEvent,
} from "@moonpay/platform-sdk-react-native";

export function GooglePaySection({
  quoteSignature,
}: {
  quoteSignature: string;
}) {
  const [challengeUrl, setChallengeUrl] = React.useState<string | null>(null);

  const handleEvent = (event: GooglePayEvent) => {
    switch (event.kind) {
      case "ready":
        break;
      case "buttonPressed":
        // Customer tapped the button — show a loading state or fire analytics.
        break;
      case "complete":
        console.log(event.payload.transaction);
        break;
      case "quoteExpired":
        // Fetch a new quote and update the prop, or call setQuote directly:
        // event.payload.setQuote(newQuote.signature);
        break;
      case "challenge":
        setChallengeUrl(event.payload.url);
        break;
      case "error":
        console.error(event.payload.kind, event.payload.message);
        break;
      case "unsupported":
        // Google Pay isn't available — fall back to another method.
        break;
    }
  };

  return (
    <>
      <MoonPayGooglePayButton quote={quoteSignature} onEvent={handleEvent} />
      {challengeUrl && (
        <MoonPayChallenge
          url={challengeUrl}
          onEvent={(e) => {
            if (e.kind === "complete" || e.kind === "cancelled") {
              setChallengeUrl(null);
            }
          }}
        />
      )}
    </>
  );
}