import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate, useSearchParams } from "react-router-dom";
import routes from "@/routes";

function NoBirthtimePage() {
  const [searchParams] = useSearchParams();
  const affiliation = searchParams.get("affiliation") || "self";
  const navigate = useNavigate();

  const handleNext = () => {
    if (affiliation === "partner") {
      navigate(
        `${routes.client.questionnaire()}/partnerProfile/partnerBirthPlace`
      );
    }
    if (affiliation === "self") {
      navigate(`${routes.client.questionnaire()}/profile/birthPlace`);
    }
  };

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

  return (
    <section className={`${styles.page} page`}>
      <img src="/starry-clock.svg" alt="The clock" />
      <div>
        <Title variant="h1" className={styles.title}>
          No problem! You can still find plenty of great insights without
          knowing
          {affiliation === "self" && " your exact birth time."}
          {affiliation === "partner" &&
            " the exact birth time of your partner."}
        </Title>
        <p className={styles.text}>
          Tip: If you find out later, you can adjust this in your
          {affiliation === "self" && " profile settings."}
          {affiliation === "partner" && " partner’s profile."}
        </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 NoBirthtimePage;