import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { selectors } from "@/store";
import { useSelector } from "react-redux";
import { getZodiacSignByDate } from "@/services/zodiac-sign";

function Satisfied() {
  const navigate = useNavigate();
  const { birthdate, partnerBirthdate, satisfied } = useSelector(
    selectors.selectQuestionnaire
  );
  const [zodiacSign, partnerZodiacSign] = [
    getZodiacSignByDate(birthdate),
    getZodiacSignByDate(partnerBirthdate),
  ];

  const handleBack = () => {
    navigate(-1);
  };

  const handleNext = () => {
    navigate(`${routes.client.questionnaire()}/relationships/emotionalConnection`);
  };

  return (
    <section className={`${styles.page} page`}>
      <img
        src={`/${satisfied === "yes" ? "sun" : "umbrella"}.svg`}
        alt={`The ${satisfied === "yes" ? "sun" : "umbrella"}`}
      />
      <div>
        {satisfied === "yes" && (
          <Title variant="h1" className={styles.title}>
            Well done! <br /> Based on our data only the top 30% of{" "}
            <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> find it easy
            to communicate with their{" "}
            <span style={{ color: "#f2c94c" }}>{partnerZodiacSign}</span>{" "}
            partner.
          </Title>
        )}
        {satisfied !== "yes" && (
          <Title variant="h1" className={styles.title}>
            You’re not alone. <br /> Based on our data 74% of{" "}
            <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> find it
            difficult to communicate with their{" "}
            <span style={{ color: "#f2c94c" }}>{partnerZodiacSign}</span>{" "}
            partner. <br /> We can help you improve this.
          </Title>
        )}
      </div>
      <div className={styles["buttons-container"]}>
        <MainButton
          className={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          Back
        </MainButton>
        <MainButton
          className={`${styles.button} ${styles["next-button"]}`}
          onClick={handleNext}
        >
          Next
        </MainButton>
      </div>
    </section>
  );
}

export default Satisfied;
