import routes from "@/routes";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import Button from "../../components/Button";
import { useTranslations } from "@/hooks/translations";
import { useNavigate } from "react-router-dom";
import { ELocalesPlacement } from "@/locales";
import { selectors } from "@/store";
import { useSelector } from "react-redux";
import { getZodiacSignByDate } from "@/services/zodiac-sign";

function PalmsInformationPartner() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
  const { partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);

  const zodiacSign = getZodiacSignByDate(partnerBirthdate);
  const navigate = useNavigate();

  const handleNext = () => {
    navigate(routes.client.compatibilityV4HeadOrHeart());
  };

  return (
    <div className={styles["page-container"]}>
      <div className={styles.zodiac}>
        <img
          className={styles.image}
          src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
          alt="Zodiac sign"
        />
      </div>
      <Title variant="h2" className={styles.title}>
        {translate(`/palms-information-partner.${zodiacSign?.toLowerCase()}.title`)}
      </Title>
      <p className={styles.description}>
        {translate(`/palms-information-partner.${zodiacSign?.toLowerCase()}.description`, {
          br: <br />,
          bold: <b>{translate(`/palms-information.${zodiacSign?.toLowerCase()}.description_bold`)}</b>
        })}
      </p>
      <Button onClick={handleNext}>
        {translate("next")}
      </Button>
    </div>
  );
}

export default PalmsInformationPartner;
