import Image from "next/image";
import { useTranslations } from "next-intl";

import { Typography } from "@/components/ui";

import styles from "./Caution.module.scss";

function Caution() {
  const t = useTranslations("AdditionalPurchases.caution");

  return (
    <div className={styles.container}>
      <Image
        src="/emoji/smiling-face-with-hearts.webp"
        alt="Love"
        width={34}
        height={34}
      />
      <div className={styles["text-container"]}>
        <Typography
          as="h4"
          size="sm"
          weight="bold"
          align="left"
          className={styles.title}
        >
          {t("title")}
        </Typography>
        <Typography as="p" size="xs" align="left" className={styles.text}>
          {t("description")}
        </Typography>
      </div>
    </div>
  );
}

export default Caution;