"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 } = useMyStayStore((state) => ({
    allRoomsAreCancelled: state.allRoomsAreCancelled,
    guaranteeInfo: state.bookedRoom.guaranteeInfo,
  }))

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