"use client"
import { Dialog, DialogTrigger } from "react-aria-components"
import { useIntl } from "react-intl"

import Modal from "@/components/HotelReservation/MyStay/Modal"
import { trackMyStayPageLink } from "@/utils/tracking"

import Alerts from "./Alerts"
import Steps from "./Steps"

import styles from "./cancelStay.module.css"

export default function CancelStay() {
  const intl = useIntl()

  function trackCancelStay() {
    trackMyStayPageLink("cancel booking")
  }

  return (
    <DialogTrigger>
      <Modal.Button icon="cancel" onClick={trackCancelStay}>
        {intl.formatMessage({ defaultMessage: "Cancel stay" })}
      </Modal.Button>
      <Modal>
        <Dialog className={styles.dialog}>
          {({ close }) => (
            <Alerts closeModal={close}>
              <Steps closeModal={close} />
            </Alerts>
          )}
        </Dialog>
      </Modal>
    </DialogTrigger>
  )
}
