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

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

function PersonalInformation({
  birthdate,
  zodiacSign,
  gender,
  birthPlace,
}: IPersonalInformationProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);

  return (
    <div
      className={styles["personal-information"]}
      style={{
        backgroundColor: gender === "male" ? "#85B6FF" : "#D1ACF2",
      }}
    >
      <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>{translate("/trial-payment.zodiac_sign")}</h6>
            <p>{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}</p>
          </li>
          <li>
            <h6>{translate("gender")}</h6>
            <p>{translate(gender?.toLowerCase())}</p>
          </li>
        </ul>
        <ul>
          <li>
            <h6>{translate("/trial-payment.date_of_birth")}</h6>
            <p>{birthdate}</p>
          </li>
          <li>
            <h6>{translate("/trial-payment.place_of_birth")}</h6>
            <p>{birthPlace}</p>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default PersonalInformation;
