import { Elements } from '@stripe/react-stripe-js';
import CheckoutForm, { TConfirmType } from '@/components/PaymentPage/methods/CheckoutForm';
import Modal from '@/components/Modal';
import { Stripe } from '@stripe/stripe-js';
import { Dispatch, SetStateAction } from 'react';

import './style.scss';

interface IPaymentCardModalProps {
  clientSecret?: string;
  stripePromise: Promise<Stripe | null> | null;
  paymentType?: TConfirmType;
  paymentIntentId?: string;
  returnUrl?: string;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
  removeNoScroll?: boolean;
}

export default function PaymentCardModal({
  clientSecret,
  stripePromise,
  paymentType,
  paymentIntentId,
  returnUrl,
  isOpen,
  setIsOpen,
  removeNoScroll,
}: IPaymentCardModalProps) {
  return (
    <Modal open={isOpen} onClose={() => setIsOpen(false)} removeNoScroll={removeNoScroll}>
      <Elements stripe={stripePromise} options={{clientSecret}}>
        <CheckoutForm
          confirmType={paymentType}
          subscriptionReceiptId={paymentIntentId}
          returnUrl={returnUrl}
        />
      </Elements>
    </Modal>
  )
}