import { Elements } from "@stripe/react-stripe-js";
import styles from "./styles.module.css";
import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
import { useEffect, useState } from "react";
import { Stripe, loadStripe } from "@stripe/stripe-js";
import SecurityPayments from "../../TrialPayment/components/SecurityPayments";

interface IPaymentFormProps {
  stripePublicKey: string;
  clientSecret: string;
  returnUrl: string;
  confirmType?: "payment" | "setup";
}

function PaymentForm({
  stripePublicKey,
  clientSecret,
  returnUrl,
  confirmType = "payment",
}: IPaymentFormProps) {
  const [stripePromise, setStripePromise] =
    useState<Promise<Stripe | null> | null>(null);

  useEffect(() => {
    setStripePromise(loadStripe(stripePublicKey));
  }, [stripePublicKey]);
  return (
    <div className={styles["payment-modal"]}>
      <div className={styles["payment-method-container"]}>
        {stripePromise && clientSecret && (
          <Elements stripe={stripePromise} options={{ clientSecret }}>
            <CheckoutForm confirmType={confirmType} returnUrl={returnUrl} />
          </Elements>
        )}
      </div>
      <SecurityPayments />
      <p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
    </div>
  );
}

export default PaymentForm;