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

function CheckoutButton() {
  const { getCheckoutUrl } = useCheckout();
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);
    const url = await getCheckoutUrl();
    setLoading(false);

    if (url) {
      // Open in in-app browser
      await openBrowser(url);
    }
  };

  return (
    <Button title="Checkout" onPress={handleCheckout} disabled={loading} />
  );
}

function useCheckout(): {
  getCheckoutUrl: () => Promise<string | null>;
}

const { cart } = useCart();
// cart?.checkoutUrl — available directly from fetched cart
// Or use getCheckoutUrl() for a dedicated fetch

import { InAppBrowser } from 'react-native-inappbrowser-reborn';

async function handleCheckout() {
  const { getCheckoutUrl } = useCheckout();
  const url = await getCheckoutUrl();
  if (url) {
    await InAppBrowser.open(url, {
      // iOS
      dismissButtonStyle: 'close',
      // Android
      showTitle: true,
      toolbarColor: '#6200ee',
    });
  }
}