"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 styles from "./guaranteeInfo.module.css"

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

  const isRewardNight = priceType === "points"
  if (allRoomsAreCancelled || (!guaranteeInfo && !isRewardNight)) {
    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.lateArrival",
              defaultMessage: "Late arrival",
            })}
          </p>
        </Typography>
      </div>
      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {intl.formatMessage({
            id: "myStay.checkInAfter18",
            defaultMessage: "Check-in after 18:00",
          })}
        </p>
      </Typography>
    </div>
  )
}