import { useIntl } from "react-intl"

import { MaterialIcon } from "../../Icons/MaterialIcon"
import { Typography } from "../../Typography"

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

export function NoPriceAvailableCard() {
  const intl = useIntl()
  return (
    <div className={styles.priceCard}>
      <div className={styles.noRooms}>
        <MaterialIcon icon="error" color="Icon/Feedback/Error" />
        <Typography variant="Body/Paragraph/mdRegular">
          <span>
            {intl.formatMessage({
              id: "booking.noRoomsAvailable",
              defaultMessage:
                "There are no rooms available that match your request.",
            })}
          </span>
        </Typography>
      </div>
    </div>
  )
}