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

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

function PersonalInformation({
  birthdate,
  zodiacSign,
  gender,
  birthPlace,
  primaryColor,
}: IPersonalInformationProps) {
  return (
    <div
      className={styles["personal-information"]}
    >
      <div className={styles["image-container"]}>
        <img
          src={`/questionnaire-redesign/zodiacs/${gender}/pdf.sex.${zodiacSign?.toUpperCase()}.${gender.toUpperCase()}.webp`}
          alt={`${gender} ${zodiacSign}`}
        />
      </div>
      <div className={styles["text-information"]}>
        <ul>
          <li>
            <h6 style={{color: primaryColor}}>Zodiac sign</h6>
            <p>{zodiacSign}</p>
          </li>
          <li>
            <h6 style={{color: primaryColor}}>Gender</h6>
            <p>{gender}</p>
          </li>
        </ul>
        <ul>
          <li>
            <h6 style={{color: primaryColor}}>Date of birth</h6>
            <p>{birthdate}</p>
          </li>
          <li>
            <h6 style={{color: primaryColor}}>Place of birth</h6>
            <p>{birthPlace}</p>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default PersonalInformation;
