"use client";

import dynamic from "next/dynamic";

import { ModalPortal } from "@/app/_components/core/modal-portal";

import type { StripePaymentDialogProps } from "./stripe-payment-dialog";
import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";

const StripePaymentDialog = dynamic(
  () =>
    import("./stripe-payment-dialog").then(
      (module) => module.StripePaymentDialog,
    ),
  {
    ssr: false,
    loading: StripePaymentDialogLoading,
  },
);

export function LazyStripePaymentDialog(props: StripePaymentDialogProps) {
  return <StripePaymentDialog {...props} />;
}

export function StripePaymentDialogLoading() {
  return (
    <ModalPortal
      open
      persistent
      onClose={() => undefined}
      scrimClassName={styles.overlay}
      panelClassName={styles.dialog}
      scrimOpacity={0.5}
      ariaLabelledBy="stripe-payment-loading-title"
      ariaDescribedBy="stripe-payment-loading-description"
    >
      <div aria-busy="true">
        <div className={styles.header}>
          <h2 id="stripe-payment-loading-title" className={styles.title}>
            Preparing secure payment
          </h2>
          <p id="stripe-payment-loading-description" className={styles.content}>
            Loading payment methods...
          </p>
        </div>
      </div>
    </ModalPortal>
  );
}
