import { formatDateToLocale } from "@/locales/localFormats";
import ZodiacImages from "../ZodiacImages";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement, language } from "@/locales";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";

function ZodiacImagesWithBook() {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
    const { dateEvent, relationshipStatus } = useSelector(selectors.selectCompatibilityV4Answers);
    const zodiacSign = getZodiacSignByDate(birthdate);
    const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
    const isSingle = relationshipStatus === "single";
    return (
        <div className={styles.container}>
            <p className={styles.title}>
                {translate("/trial-payment.zodiac-images-container-title")}
            </p>
            <ZodiacImages
                classNameContainer={`${styles.zodiacImagesContainer} ${isSingle ? styles.zodiacImagesContainerSingle : ""}`}
                gender={gender}
                zodiacSign={zodiacSign}
                relationshipStatus={relationshipStatus}
                partnerGender={partnerGender}
                partnerZodiacSign={partnerZodiacSign}
            />
            {dateEvent && <p className={styles.dateEvent}>
                {formatDateToLocale(dateEvent, language)}
            </p>}
        </div>
    )
}

export default ZodiacImagesWithBook