w-aura/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx

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";
import Header from "../../components/Header";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";

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

  const { animationData: animationSun } = useLottie({
    loadKey: satisfied === "yes" ? ELottieKeys.sun : undefined,
  });

  const { animationData: animationUmbrella } = useLottie({
    loadKey: satisfied === "no" ? ELottieKeys.umbrella : undefined,
  });

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

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

  return (
    <section
      className={`${styles.page} page`}
      style={{
        backgroundImage: `url(/satisfied-${satisfied}.png)`,
      }}
    >
      <Header
        classNameTitle={styles["header-title"]}
        isBackButtonVisible={false}
      />
      {satisfied === "yes" && animationSun && (
        <div
          style={{
            width: "100%",
            aspectRatio: "337 / 406",
          }}
        >
          <DotLottieReact
            className={styles["lottie-animation"]}
            data={animationSun}
            autoplay
            loop={false}
          />
        </div>
      )}
      {satisfied === "no" && animationUmbrella && (
        <div
          style={{
            width: "100%",
            aspectRatio: "310 / 300",
          }}
        >
          <DotLottieReact
            className={styles["lottie-animation"]}
            data={animationUmbrella}
            autoplay
            loop={false}
          />
        </div>
      )}
      <div>
        {satisfied === "yes" && (
          <>
            <Title variant="h1" className={styles.title}>
              Well done!
            </Title>
            <p className={styles.text}>
              Based on our data 74% of Based on our data only the top 30% of{" "}
              {zodiacSign} find it easy to communicate with their{" "}
              {partnerZodiacSign} partner.
            </p>
          </>
        )}
        {satisfied !== "yes" && (
          <>
            <Title variant="h1" className={styles.title}>
              You’re not alone.
            </Title>
            <p className={styles.text}>
              Based on our data 74% of {zodiacSign}find it difficult to
              communicate with their {partnerZodiacSign} partner. <br /> We can
              help you improve this.
            </p>
          </>
        )}
      </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;