import { StartPayButton, StartPayProvider } from "startbutton-payment-gateway";

export const AdvancedCustomizationExample = () => (
  <StartPayProvider
    config={{
      publicKey: "pk_test_xxxxx",
      environment: "sandbox",
      apiBaseUrl: "https://api.yourdomain.com/payments",
      mode: "popup",
      timeout: 30000
    }}
  >
    <StartPayButton
      amount={2499}
      currency="INR"
      orderId="ORDER_ADVANCED_1001"
      autoStart={false}
      customer={{
        name: "Customer Name",
        email: "customer@example.com",
        phone: "9999999999"
      }}
      metadata={{
        plan: "premium",
        channel: "react-example"
      }}
      style={{
        border: 0,
        borderRadius: 6,
        background: "#111827",
        color: "#ffffff",
        cursor: "pointer",
        fontWeight: 700,
        minHeight: 44,
        padding: "0 18px"
      }}
      onClick={async (_event, controls) => {
        console.log("Launching checkout with status", controls.lastStatus);
        await controls.launchPaymentFlow();
      }}
      onPaymentAuthorized={(response) => console.log("Payment authorized", response)}
      onPaymentDeclined={(response) => console.log("Payment declined", response)}
      onPaymentPendingReview={(response) => console.log("Payment pending", response)}
      onPaymentAborted={(response) => console.log("Payment cancelled", response)}
      onPaymentException={(response) => console.log("Payment exception", response)}
      onPaymentSettled={(response) => console.log("Payment settled", response)}
    >
      Pay Securely
    </StartPayButton>
  </StartPayProvider>
);