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";

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 [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}>
        Your reading
      </Title>
      <div className={styles["image-container"]}>
        <img
          src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
          alt={`${gender} ${zodiacSign}`}
        />
      </div>
      <div className={styles["text-container"]}>
        <Title variant="h5" className={styles["secondary-title"]}>
          Content
        </Title>
        <ol>
          {points.map((point, index) => (
            <li key={index}>
              <p>{point}</p>
            </li>
          ))}
        </ol>
        <Title variant="h5" className={styles["secondary-title"]}>
          Personality
        </Title>
        <p className={styles["personality-information"]}>
          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;
