import styles from "./styles.module.scss";
import { useEffect, useState } from "react";
import { getRandomArbitrary } from "@/services/random-value";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import Infinite from "../../images/SVG/Infinite";
import People from "../../images/SVG/People";

function JoinedToday() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
  const [countUsers, setCountUsers] = useState(752);

  useEffect(() => {
    const randomDelay = getRandomArbitrary(3000, 5000);
    const countUsersTimeOut = setTimeout(() => {
      setCountUsers((prevState) => prevState + 1);
    }, randomDelay);
    return () => clearTimeout(countUsersTimeOut);
  }, [countUsers]);

  return (
    <div className={styles.container}>
      <div className={styles.row}>
        <Infinite />
        <p className={styles.text}>
          {translate("/trial-payment.joined_today.text1")}
        </p>
      </div>
      <div className={styles.row}>
        <People style={{ justifySelf: "end" }} />
        <p className={styles.text}>
          {translate("/trial-payment.joined_today.text2", {
            count: countUsers,
          })}
        </p>
      </div>
    </div>
  );
}

export default JoinedToday;
