import React from "react";
import TextTransition, { presets } from "react-text-transition";
import { useTranslation } from "react-i18next";

export default function AnimatedText() {
  const { t } = useTranslation();
  const TEXTS = [
    `${t("footer.industries.list.1")}`,
    `${t("footer.industries.list.2")}`,
    `${t("footer.industries.list.3")}`,
    `${t("footer.industries.list.4")}`,
    ` ${t("footer.industries.list.5")}`,
    `${t("footer.industries.list.6")}`,
    `${t("footer.industries.list.7")}`,
    `${t("footer.industries.list.8")}`,
    `${t("footer.industries.list.9")}`,
    `${t("footer.industries.list.10")}`,
  ];

  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const intervalId = setInterval(
      () => setIndex((index) => index + 1),
      3000 // every 3 seconds
    );
    return () => clearTimeout(intervalId);
  }, []);

  return (
    <div>
      <h1 style={{ fontFamily: "semibold", fontSize: "32px" }}>
        {t("whychoose.subHeading")} <br />
        <span
          style={{
            fontFamily: "semibold",
            fontSize: "32px",
            color: "#EF6074",
          }}
        >
          <TextTransition
            inline="true"
            text={TEXTS[index % TEXTS.length]}
            springConfig={presets.wobbly}
          />
        </span>
      </h1>
    </div>
  );
}
