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

import { Typography, UserAvatar } from "@/components/ui";
import { emailMarketingCompV2Images } from "@/shared/constants/images";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";

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

export default async function HiBlock() {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.hi-block")
  );

  return (
    <div className={styles.container}>
      <div className={styles["text-container"]}>
        <Typography as="h2" align="left" className={styles.title}>
          {t("title")}
        </Typography>
        <Typography as="p" align="left" className={styles.description}>
          {t("description")}
        </Typography>
      </div>
      <div className={styles.card}>
        <Typography
          as="p"
          align="center"
          color="white"
          className={styles.title}
        >
          {t("card.title")}
        </Typography>
        <div
          className={styles["image-container"]}
          style={{
            backgroundImage: `url(${emailMarketingCompV2Images("gpt-portrait.jpg")})`,
          }}
        >
          <div className={styles.avatars}>
            <UserAvatar
              src={emailMarketingCompV2Images("avatar1.jpg")}
              alt="avatar 1"
              size="s"
              className={styles.avatar}
            />
            <UserAvatar
              src={emailMarketingCompV2Images("avatar2.jpg")}
              alt="avatar 2"
              size="s"
              className={styles.avatar}
            />
            <UserAvatar
              src={emailMarketingCompV2Images("avatar3.jpg")}
              alt="avatar 3"
              size="s"
              className={styles.avatar}
            />
            <Typography className={styles.count}>{t("card.count")}</Typography>
          </div>
          <Typography
            as="p"
            align="left"
            color="white"
            className={styles.description}
          >
            {t("card.image-description")}
          </Typography>
        </div>
      </div>
    </div>
  );
}
