import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.css";
import { ELocalesPlacement } from "@/locales";
import { images } from "../../data";

interface IWithPartnerInformationProps {
  birthdate: string;
  zodiacSign: string;
  gender: string;
  birthPlace: string;
  partnerBirthDate: string;
  partnerZodiacSign: string;
  partnerGender: string;
  partnerBirthPlace: string;
}

function WithPartnerInformation(props: IWithPartnerInformationProps) {
  const {
    birthdate,
    zodiacSign,
    gender,
    birthPlace,
    partnerBirthDate,
    partnerZodiacSign,
    partnerGender,
    partnerBirthPlace,
  } = props;
  const { translate } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);

  return (
    <div
      className={styles["personal-information"]}
    >
      <div className={styles["images-container"]}>
        <div className={styles["image-container"]}>
          <img
            src={`/questionnaire-redesign/zodiacs/${gender}/pdf.sex.${zodiacSign?.toUpperCase()}.${gender.toUpperCase()}.webp`}
            alt={`${gender} ${zodiacSign}`}
          />
          {/* <p>{translate("you")}</p> */}
        </div>
        <img src={images("plus.svg")} alt="Plus" />
        <div className={styles["image-container"]}>
          <img
            src={`/questionnaire-redesign/zodiacs/${partnerGender}/pdf.sex.${partnerZodiacSign?.toUpperCase()}.${partnerGender.toUpperCase()}.webp`}
            alt={`${partnerGender} ${partnerZodiacSign}`}
          />
          {/* <p>{translate("partner")}</p> */}
        </div>
      </div>
      <div className={styles["text-information"]}>
        <ul>
          <li>
            <h6>{translate("trial-payment.zodiac_sign")}</h6>
            <p>
              {zodiacSign?.length
                ? translate(`trial-payment.zodiac_signs_${zodiacSign?.toLowerCase()}`)
                : "-"}
            </p>
          </li>
          <li>
            <h6>{translate("trial-payment.gender")}</h6>
            <p>{gender.length ? translate(`trial-payment.${gender?.toLowerCase()}`) : "-"}</p>
          </li>
          <li>
            <h6>{translate("trial-payment.date_of_birth")}</h6>
            <p>{birthdate.length ? birthdate : "-"}</p>
          </li>
          <li>
            <h6>{translate("trial-payment.place_of_birth")}</h6>
            <p>{birthPlace.length ? birthPlace : "-"}</p>
          </li>
        </ul>
        <ul>
          <li>
            <h6>{translate("trial-payment.zodiac_sign")}</h6>
            <p>
              {partnerZodiacSign?.length
                ? translate(`trial-payment.zodiac_signs_${partnerZodiacSign?.toLowerCase()}`)
                : "-"}
            </p>
          </li>
          <li>
            <h6>{translate("trial-payment.gender")}</h6>
            <p>{partnerGender.length ? translate(`trial-payment.${partnerGender?.toLowerCase()}`) : "-"}</p>
          </li>
          <li>
            <h6>{translate("trial-payment.date_of_birth")}</h6>
            <p>{partnerBirthDate.length ? partnerBirthDate : "-"}</p>
          </li>
          <li>
            <h6>{translate("trial-payment.place_of_birth")}</h6>
            <p>{partnerBirthPlace.length ? partnerBirthPlace : "-"}</p>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default WithPartnerInformation;
