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

function DidYouKnowPage(): JSX.Element {
  const { translate } = useTranslations();
  const navigate = useNavigate();
  const handleNext = () => navigate(routes.client.feedback());
  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);

  return (
    <section className={`${styles.page} page`}>
      <div className={styles.content}>
        <Title variant="h1">{translate("did_you_know")}</Title>
        <p className={styles.zodiacInfo}>
          {translate("zodiac_sign_info", { zodiacSign })}
        </p>
      </div>
      <footer className={styles.footer}>
        <MainButton onClick={handleNext}>
          {translate("learn_about_my_energy")}
        </MainButton>
        <span className={styles.skip} onClick={handleNext}>
          {translate("skip_for_now")}
        </span>
      </footer>
    </section>
  );
}

export default DidYouKnowPage;
