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";

function RelationshipAlmostTherePage() {
  const navigate = useNavigate();

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

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

  return (
    <section className={`${styles.page} page`}>
      <img
        src="/magnifier.svg"
        alt="The magnifier"
        style={{ minHeight: "220px" }}
      />
      <div>
        <Title variant="h1" className={styles.title}>
          Almost there! Now let's begin tailoring your plan by understanding
          your{" "}
          <span className={styles.purple}>
            Relationship & Personality Patterns
          </span>
          .
        </Title>
        <p className={styles.text}>
          Please take your time when answering. Each response is used to craft
          the guidance plan for 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 RelationshipAlmostTherePage;