"use client";

import { useTranslations } from "next-intl";

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

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

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

  return (
    <div className={styles.container}>
      <div className={styles.iconContainer}>
        <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.85938 10.0879L8.91797 16.6777C9.21094 16.9511 9.59766 17.1035 10 17.1035C10.4023 17.1035 10.7891 16.9511 11.082 16.6777L18.1406 10.0879C19.3281 8.98239 20 7.43161 20 5.81051V5.58395C20 2.85348 18.0273 0.525356 15.3359 0.0761369C13.5547 -0.220738 11.7422 0.361293 10.4688 1.63473L10 2.10348L9.53125 1.63473C8.25781 0.361293 6.44531 -0.220738 4.66406 0.0761369C1.97266 0.525356 0 2.85348 0 5.58395V5.81051C0 7.43161 0.671875 8.98239 1.85938 10.0879Z" fill="#4ECDC4"/>
        </svg>
      </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>
  );
}