import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { palmistryV1Prefix } from "@/routes";
import { useMemo, useRef } from "react";
import MoneyBackGuarantee from "../MoneyBackGuarantee";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IPoint {
  icon: string;
  title: string;
  text: string;
}

function HowWork() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const textContainersRef = useRef([] as HTMLDivElement[]);

  const points: IPoint[] = useMemo(
    () => [
      {
        icon: `${palmistryV1Prefix}/check-mark.svg`,
        title: translate("/trial-payment.how_work.point1_title"),
        text: translate("/trial-payment.how_work.point1_text"),
      },
      {
        icon: `${palmistryV1Prefix}/check-mark.svg`,
        title: translate("/trial-payment.how_work.point2_title"),
        text: translate("/trial-payment.how_work.point2_text"),
      },
      {
        icon: `${palmistryV1Prefix}/circle-in-ring.svg`,
        title: translate("/trial-payment.how_work.point3_title"),
        text: translate("/trial-payment.how_work.point3_text"),
      },
      {
        icon: `${palmistryV1Prefix}/ring.svg`,
        title: translate("/trial-payment.how_work.point4_title"),
        text: translate("/trial-payment.how_work.point4_text"),
      },
    ],
    [translate]
  );

  return (
    <div className={styles.container}>
      {points.map((point, index) => (
        <div className={styles.block} key={index}>
          <div className={styles["left-side"]}>
            <img src={point.icon} alt="Check mark" />
            <div
              className={styles["vertical-line"]}
              style={{
                height: `${
                  (textContainersRef.current?.[index]?.clientHeight || 0) - 26
                }px`,
              }}
            />
          </div>
          <div
            className={styles["text-container"]}
            ref={(el) =>
              (textContainersRef.current[index] = el as HTMLDivElement)
            }
          >
            <Title variant="h3" className={styles.title}>
              {point.title}
            </Title>
            <p className={styles.text}>{point.text}</p>
          </div>
        </div>
      ))}
      <MoneyBackGuarantee />
    </div>
  );
}

export default HowWork;
