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>
  )
}