import { useIntl } from "react-intl"

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

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

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

  const errorMessage = intl.formatMessage({
    id: "bookingWidget.child.ageRequiredError",
    defaultMessage: "Child age is required",
  })

  return (
    <div className={styles.container}>
      <Typography
        className={styles.title}
        variant="Body/Supporting text (caption)/smBold"
      >
        <span>
          <MaterialIcon
            icon="error"
            isFilled
            color="Icon/Feedback/Error"
            size={20}
          />
          {errorMessage}
        </span>
      </Typography>
    </div>
  )
}