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

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

function YourReading({
    gender,
    zodiacSign,
    relationshipStatus,
    partnerGender,
    partnerZodiacSign
}: YourReadingProps) {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
    const { flags, ready } = useMetricABFlags();
    const version = flags?.yourReading?.[0] ?? "v1";

    return (
        <div className={styles.container}>
            <Title
                className={styles.title}
                variant="h3"
            >
                {translate("/try-app.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("/try-app.your-reading.subtitle")}
            </Title>
            <ul className={styles.points}>
                {ready && Array.from({ length: 8 }).map((_, index) => (
                    <li key={index} className={`${index > 3 ? styles.point_blur : ""}`}>
                        {translate(`/try-app.your-reading.points.${version}.point${index + 1}`)}
                    </li>
                ))}
            </ul>
            <p className={styles.description}>
                {translate("/try-app.your-reading.description")}
            </p>
        </div>
    )
}

export default YourReading