import { useIntl } from "react-intl"

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

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

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

export default function ValidationError() {
  const intl = useIntl()

  return (
    <div className={styles.container}>
      <Caption className={styles.title} color="red" type="bold">
        <MaterialIcon
          icon="error_circle_rounded"
          color="Icon/Feedback/Error"
          size={20}
        />
        {intl.formatMessage({
          defaultMessage: "Enter destination or hotel",
        })}
      </Caption>
      <Caption className={styles.message} type="regular">
        {intl.formatMessage({
          defaultMessage:
            "A destination or hotel name is needed to be able to search for a hotel room.",
        })}
      </Caption>
    </div>
  )
}
