"use client";

import { useTranslations } from "next-intl";

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

import HeartIcon from "./HeartIcon.svg";

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

export default function AdditionalPurchaseBanner() {
  const t = useTranslations("AdditionalPurchases.banner");

  return (
    <div className={styles.container}>
      <div className={styles.iconContainer}>
        <HeartIcon />
      </div>
      <div className={styles.textContainer}>
        <Typography as="h4" align="left" className={styles.title}>
          {t("title")}
        </Typography>
        <Typography as="p" align="left" className={styles.description}>
          {t("description")}
        </Typography>
      </div>
    </div>
  );
}
