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

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

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

interface CustomerCounterProps {
  count: number;
}

export default function CustomerCounter({ count }: CustomerCounterProps) {
  const t = useTranslations(
    translatePathEmailMarketingCompatibilityV1("Landing")
  );

  return (
    <div className={styles.container}>
      <Image
        className={styles.circularText}
        src={emailMarketingCompV1Images(t("circular-text-image"))}
        alt="circular-text-image"
        width={287}
        height={287}
      />
      <div className={styles.count}>{count}</div>
    </div>
  );
}
