import styles from "./styles.module.scss"

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

function ZodiacImages({
    gender,
    partnerGender,
    zodiacSign,
    partnerZodiacSign,
    relationshipStatus,
    classNameContainer = ""
}: ZodiacImagesProps) {

    const getZodiacImagesWithPartnerClassName = () => {
        if (relationshipStatus === "single") {
            return "";
        }
        return `${styles["with-partner"]} ${styles[`with-partner-${gender}-${partnerGender}`]}`;
    }

    return (
        <div
            className={`${styles["zodiac-images"]} ${getZodiacImagesWithPartnerClassName()} ${classNameContainer}`}
        // style={{ marginBottom: `${-height / 2}px` }}
        >
            <img src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`} alt="Profile zodiac sign" />
            {relationshipStatus !== "single" && <img src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${partnerZodiacSign?.toLowerCase()}.svg`} alt="Partner zodiac sign" />}
        </div>
    )
}

export default ZodiacImages