/* eslint-disable prettier/prettier */
/* eslint-disable jsx-a11y/iframe-has-title */

import { Modal, ModalHeader, ModalTitle } from "@/components/ui/modal/modal";
import { useModal } from "@/components/ui/modal/modal.hook";

import { MasterpassLoading } from "./masterpass-loading";

interface Masterpass3DModalProps {
  url: string;
  setModalState: () => void;
  loading: boolean;
}

const Masterpass3DModal = (props: Masterpass3DModalProps) => {
  const { closeModal, modalOpen } = useModal({ open: true });

  return (
    <Modal
      size="xl"
      open={modalOpen}
      onClose={() => {
        props.setModalState();
        closeModal();
      }}
      header={
        <ModalHeader>
          <ModalTitle>3D Modal</ModalTitle>
        </ModalHeader>
      }
      footer
    >
      {props.loading ? (
        <div className="flex min-h-[400px] items-center justify-center">
          <MasterpassLoading />
        </div>
      ) : (
        <iframe
          src={props.url}
          style={{ minHeight: 400, minWidth: 500 }}
          name="mp_3dpamyment_iframe"
          id="mp_3dpamyment_iframe"
        />
      )}
    </Modal>
  );
};

export { Masterpass3DModal };