import type { ReactNode } from "react";
import React, { cloneElement } from "react";

import { Modal } from "@/components/ui/modal/modal";
import { useModal } from "@/components/ui/modal/modal.hook";
import useWidgetHotel from "@/hooks/useBaseHotel";
import { useLocale } from "@/hooks/useLocale";

type Props = {
  children: ReactNode;
};

const ContactModal = (props: Props) => {
  const { closeModal, openModal, modalOpen } = useModal({ open: false });
  const { t } = useLocale();
  const { selectedWidgetHotel, phoneData } = useWidgetHotel();

  const clonedChildren = cloneElement(props.children as any, {
    onClick: openModal,
  });

  return (
    <>
      {clonedChildren}
      <Modal
        size="xl"
        open={modalOpen}
        onClose={closeModal}
        title={t("Call us")}
        footer
      >
        <p>
          {t(
            "You can contact the Call Center at {{phone}} for the relevant room request.",
            {
              phone: selectedWidgetHotel?.phone || phoneData?.PropertyValue,
            },
          )}
        </p>
      </Modal>
    </>
  );
};

export default ContactModal;