"use client"
import { useIntl } from "react-intl"

import Modal from "@/components/HotelReservation/MyStay/Modal"
import Alert from "@/components/TempDesignSystem/Alert"

import { AlertTypeEnum } from "@/types/enums/alert"

export default function MultiRoomBooking({
  closeModal,
}: {
  closeModal: () => void
}) {
  const intl = useIntl()
  return (
    <Modal.Content>
      <Modal.Content.Header
        handleClose={closeModal}
        title={intl.formatMessage({
          defaultMessage: "New dates for the stay",
        })}
      />
      <Modal.Content.Body>
        <Alert
          type={AlertTypeEnum.Info}
          heading={intl.formatMessage({
            defaultMessage: "Contact customer service",
          })}
          text={intl.formatMessage({
            defaultMessage:
              "As this is a multiroom stay, any dates changes are applicable to all rooms. Please contact customer service to update the dates.",
          })}
        />
      </Modal.Content.Body>
      <Modal.Content.Footer>
        <Modal.Content.Footer.Secondary onClick={closeModal}>
          {intl.formatMessage({ defaultMessage: "Back" })}
        </Modal.Content.Footer.Secondary>
      </Modal.Content.Footer>
    </Modal.Content>
  )
}
