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

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

const MasterpassBookingModal = () => {
  const { closeModal, modalOpen } = useModal({ open: true });

  return (
    <Modal
      size="xl"
      open={modalOpen}
      onClose={() => {
        closeModal();
      }}
      header={
        <ModalHeader>
          <ModalTitle>Ödeme</ModalTitle>
        </ModalHeader>
      }
      footer
    >
      <div className="flex flex-col items-center justify-center gap-4">
        <span className="text-center">
          Rezervasyon işleminiz başladı, lütfen işlem tamamlanana kadar
          bekleyiniz.
          <br />
          Ödemeniz alınıyor…
        </span>
        <MasterpassLoading />
        <span>Rezervasyonunuz oluşturuluyor...</span>
      </div>
    </Modal>
  );
};

export { MasterpassBookingModal };