"use client";

import dynamic from "next/dynamic";

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} />;
}

function StripePaymentDialogLoading() {
  return (
    <div
      className={styles.overlay}
      role="dialog"
      aria-modal="true"
      aria-labelledby="stripe-payment-loading-title"
    >
      <div className={styles.dialog} aria-busy="true">
        <div className={styles.header}>
          <h2 id="stripe-payment-loading-title" className={styles.title}>
            Preparing secure payment
          </h2>
          <p className={styles.content}>Loading payment methods...</p>
        </div>
      </div>
    </div>
  );
}