import styles from "./styles.module.css";

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;

  return (
    <div className={styles["personal-information"]}>
      <div className={styles["images-container"]}>
        <div className={styles["image-container"]}>
          <img
            src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
            alt={`${gender} ${zodiacSign}`}
          />
          <p>You</p>
        </div>
        <div className={styles["image-container"]}>
          <img
            src={`/questionnaire/zodiacs/${partnerGender}/${partnerZodiacSign?.toLowerCase()}.webp`}
            alt={`${partnerGender} ${partnerZodiacSign}`}
          />
          <p>Partner</p>
        </div>
      </div>
      <div className={styles["text-information"]}>
        <ul>
          <li>
            <h6>Zodiac sign</h6>
            <p>{zodiacSign?.length ? zodiacSign : "-"}</p>
          </li>
          <li>
            <h6>Gender</h6>
            <p>{gender.length ? gender : "-"}</p>
          </li>
          <li>
            <h6>Date of birth</h6>
            <p>{birthdate.length ? birthdate : "-"}</p>
          </li>
          <li>
            <h6>Place of birth</h6>
            <p>{birthPlace.length ? birthPlace : "-"}</p>
          </li>
        </ul>
        <ul>
          <li>
            <h6>Zodiac sign</h6>
            <p>{partnerZodiacSign?.length ? partnerZodiacSign : "-"}</p>
          </li>
          <li>
            <h6>Gender</h6>
            <p>{partnerGender.length ? partnerGender : "-"}</p>
          </li>
          <li>
            <h6>Date of birth</h6>
            <p>{partnerBirthDate.length ? partnerBirthDate : "-"}</p>
          </li>
          <li>
            <h6>Place of birth</h6>
            <p>{partnerBirthPlace.length ? partnerBirthPlace : "-"}</p>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default WithPartnerInformation;
