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

interface IPersonalInformationProps {
  birthdate: string;
  zodiacSign: string;
  gender: string;
  birthPlace: string;
}

function PersonalInformation({
  birthdate,
  zodiacSign,
  gender,
  birthPlace,
}: IPersonalInformationProps) {

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

export default PersonalInformation;
