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

const PayWithHook = () => {
  const { startPayment, loading } = useStartPay();

  const handlePayment = async () => {
    const response = await startPayment({
      amount: 1500,
      currency: "INR",
      orderId: "ORDER_1001",
      customer: {
        name: "Pradeep Kumar",
        email: "test@example.com",
        phone: "9999999999"
      },
      metadata: {
        applicationId: 16871,
        service: "visa-booking"
      }
    });

    console.log(response);
  };

  return (
    <button type="button" disabled={loading} onClick={handlePayment}>
      {loading ? "Processing..." : "Pay Now"}
    </button>
  );
};

export const HookPaymentExample = () => (
  <StartPayProvider
    config={{
      publicKey: "pk_test_xxxxx",
      environment: "sandbox",
      apiBaseUrl: "https://api.example.com"
    }}
  >
    <PayWithHook />
  </StartPayProvider>
);