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

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useMyStayStore } from "@/stores/my-stay"

import { GuaranteeInfoModal } from "./GuaranteeInfoModal"

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

export default function GuaranteeInfo() {
  const intl = useIntl()
  const { isGuaranteeable, guaranteeInfo, allRoomsAreCancelled } =
    useMyStayStore((state) => ({
      isGuaranteeable: state.bookedRoom.isGuaranteeable,
      guaranteeInfo: state.bookedRoom.guaranteeInfo,
      allRoomsAreCancelled: state.allRoomsAreCancelled,
    }))

  if ((isGuaranteeable && !guaranteeInfo) || allRoomsAreCancelled) {
    return null
  }

  return (
    <div className={styles.row}>
      <div className={styles.label}>
        <MaterialIcon icon="check_circle" />
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>
            {intl.formatMessage({
              id: "myStay.bookingGuaranteed",
              defaultMessage: "Booking guaranteed",
            })}
          </p>
        </Typography>
      </div>
      <div className={styles.guaranteeInfo}>
        <GuaranteeInfoModal />
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "myStay.roomHeldAfter18",
              defaultMessage: "Room held after 18:00",
            })}
          </p>
        </Typography>
      </div>
    </div>
  )
}