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

import { emailMarketingCompV1Images } from "@/shared/constants/images";
import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate";

import { TextWithEmoji } from "..";

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

export default function UnderstandingYourself() {
  const t = useTranslations(
    translatePathEmailMarketingCompatibilityV1("Landing")
  );

  return (
    <div className={styles.container}>
      <TextWithEmoji
        text={t("better-understanding-yourself")}
        emoji="relieved-face.svg"
      />
      <Image
        className={styles.hand}
        src={emailMarketingCompV1Images("hand-with-eye.svg")}
        alt="hand with eye"
        width={339}
        height={376}
      />
    </div>
  );
}
