// 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 { useSelector } from "react-redux";
// import { selectors } from "@/store";

function WorksForUsPage() {
  const navigate = useNavigate();
  // const { relationshipProblem } = useSelector(selectors.selectQuestionnaire);

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

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

  return (
    <section className={`${styles.page} page`}>
      <img src="/starry_key.svg" alt="The starry key" />
      <div>
        {/* {relationshipProblem === "very_unhappy" && (
          <Title variant="h1" className={styles.title}>
            We’ve got you covered! We’ll start with small, personalized insights
            into you and your partner’s personality traits.
          </Title>
        )}
        {relationshipProblem === "unhappy" && (
          <Title variant="h1" className={styles.title}>
            You’re probably doing better than you think! We’ll help you identify
            how to improve and stick with it.
          </Title>
        )}
        {relationshipProblem === "happy" && (
          <Title variant="h1" className={styles.title}>
            Wonderful!
            <br /> Let's find out what's working (and what isn’t) and go from
            there.
          </Title>
        )} */}
        <p className={styles.text}>
          Now, we need some information about{" "}
          <span className={styles.blue}>Your Partner’s Profile</span> to create
          the astrological synastry blueprint between you and your partner.
        </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 WorksForUsPage;
