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

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

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

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

  return (
    <div className={styles.container}>
      <Typography className={styles.title} color="white" as="h2">
        {t("personalized-plan-title")}
        <span> {t("personalized-plan-free")}</span>
      </Typography>
      <Image
        className={styles.stars}
        src={emailMarketingCompV1Images("stars.svg")}
        alt="stars"
        width={460}
        height={117}
      />
      <Image
        className={styles.zodiacs}
        src={emailMarketingCompV1Images("zodiac-in-space.svg")}
        alt="stars"
        width={460}
        height={233}
      />
    </div>
  );
}
