import Title from "@/components/Title";
import styles from "./styles.module.css";
import CustomButton from "../CustomButton";
import { useEffect, useState } from "react";
import { yourReadingList } from "@/data/yourReading";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IYourReadingProps {
  gender: string;
  zodiacSign: string;
  singleOrWithPartner: "single" | "partner";
  buttonText?: string;
  callToActionText?: string;
  buttonClick: () => void;
}

function YourReading({
  gender,
  zodiacSign,
  singleOrWithPartner = "single",
  buttonText = "get my reading",
  callToActionText = "To read the full reading you need get access",
  buttonClick,
}: IYourReadingProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const [points, setPoints] = useState(yourReadingList);

  useEffect(() => {
    if (singleOrWithPartner === "single") {
      return setPoints([
        ...yourReadingList.slice(-2),
        ...yourReadingList.slice(0, -2),
      ]);
    }
    return setPoints(yourReadingList);
  }, [singleOrWithPartner]);

  return (
    <div className={styles["your-reading"]}>
      <Title variant="h3" className={styles.title}>
        {translate("/trial-payment.your_reading")}
      </Title>
      <div className={styles["image-container"]}>
        <img
          src={`/questionnaire-redesign/zodiacs/${gender}/pdf.sex.${zodiacSign?.toUpperCase()}.${gender.toUpperCase()}.webp`}
          alt={`${gender} ${zodiacSign}`}
        />
      </div>
      <div className={styles["text-container"]}>
        <Title variant="h5" className={styles["secondary-title"]}>
          {translate("/trial-payment.content")}
        </Title>
        <ol>
          {points.map((point, index) => (
            <li key={index}>
              <p>{translate(point)}</p>
            </li>
          ))}
        </ol>
        {translate("/trial-payment.content_list")}
        <Title variant="h5" className={styles["secondary-title"]}>
          {translate("/trial-payment.personality")}
        </Title>
        <p className={styles["personality-information"]}>
          {translate("/trial-payment.personality_information")}
        </p>
      </div>
      <div className={styles["cover-container"]}>
        <div className={styles["cover"]}></div>
        <p>{callToActionText}</p>
        <CustomButton className={styles.button} onClick={buttonClick}>
          {buttonText}
        </CustomButton>
      </div>
    </div>
  );
}

export default YourReading;
