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

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

import Caption from "@/components/TempDesignSystem/Text/Caption"

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

export default function RoomNotAvailable() {
  const intl = useIntl()
  return (
    <div className={styles.noRoomsContainer}>
      <div className={styles.noRooms}>
        <MaterialIcon
          icon="error_circle_rounded"
          color="Icon/Feedback/Error"
          size={16}
        />
        <Caption color="uiTextHighContrast" type="bold">
          {intl.formatMessage({
            defaultMessage: "This room is not available",
          })}
        </Caption>
      </div>
    </div>
  )
}
