import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.scss"
import Title from "@/components/Title";
import ZodiacImages from "../ZodiacImages";
import { ELocalesPlacement } from "@/locales";

interface YourReadingProps {
    gender: string;
    zodiacSign: string;
    relationshipStatus: string;
    partnerGender?: string;
    partnerZodiacSign?: string;
}

function YourReading({
    gender,
    zodiacSign,
    relationshipStatus,
    partnerGender,
    partnerZodiacSign
}: YourReadingProps) {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const version = "v1";

    return (
        <div className={styles.container}>
            <Title
                className={styles.title}
                variant="h3"
            >
                {translate("/trial-payment.your-reading.title")}
            </Title>
            <ZodiacImages
                gender={gender}
                zodiacSign={zodiacSign}
                relationshipStatus={relationshipStatus}
                partnerGender={partnerGender}
                partnerZodiacSign={partnerZodiacSign}
                classNameContainer={styles.zodiacImages}
            />
            <Title
                className={styles.subtitle}
                variant="h4"
            >
                {translate("/trial-payment.your-reading.subtitle")}
            </Title>
            <ul className={styles.points}>
                {Array.from({ length: 7 }).map((_, index) => (
                    <li
                        key={index}
                        className={`${index > 2 ? styles.point_blur : ""}`}
                        style={{ marginBottom: "1em" }}
                    >
                        {
                            relationshipStatus !== "single" ?
                                translate(`/trial-payment.your-reading.points.${version}.point${index + 1}`) :
                                translate(`/trial-payment.your-reading.points.single.${version}.point${index + 1}`)
                        }
                    </li>
                ))}
            </ul>
            {/* <p className={styles.description}>
                {translate("/trial-payment.your-reading.description")}
            </p> */}
        </div>
    )
}

export default YourReading