import { getTranslations } from "next-intl/server";

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

import HeartIcon from "./HeartIcon.svg";

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

export default async function VideoGuidesBanner() {
  const t = await getTranslations("AdditionalPurchases.video-guides.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>
  );
}
