import { useIntl } from "react-intl"

import { ErrorCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

export default function NoPriceAvailableCard() {
  const intl = useIntl()
  return (
    <div className={styles.priceCard}>
      <div className={styles.noRooms}>
        <div>
          <ErrorCircleIcon color="red" />
        </div>
        <Caption color="uiTextHighContrast">
          {intl.formatMessage({
            id: "There are no rooms available that match your request.",
          })}
        </Caption>
      </div>
    </div>
  )
}