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;
    isDescriptionVisible?: boolean;
    pointsClassName?: string;
    pointsLength?: number;
    titleClassName?: string;
    subtitleClassName?: string;
    blurPointsIndex?: number;
    pointsTranslateVersion?: string;
}

function YourReading({
    gender,
    zodiacSign,
    relationshipStatus,
    partnerGender,
    partnerZodiacSign,
    isDescriptionVisible = true,
    pointsClassName = "",
    pointsLength = 8,
    titleClassName = "",
    subtitleClassName = "",
    blurPointsIndex = 3,
    pointsTranslateVersion = "v1"
}: YourReadingProps) {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const { flags, ready } = useMetricABFlags();
    let version = flags?.yourReading?.[0] ?? "v1";
    if (pointsTranslateVersion) {
        version = pointsTranslateVersion;
    }


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

export default YourReading