import styles from "./styles.module.scss";
import AnswerExplanation from "../../templates/AnswerExplanation";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useMemo } from "react";

function PersonalizedRelationshipAnalysis() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const { relationshipStatus: relationshipStatusAnswer } = useSelector(
    selectors.selectCompatibilityV2Answers
  );

  const relationshipStatus = useMemo(() => {
    return relationshipStatusAnswer === "single" ? "single" : "relationship";
  }, [relationshipStatusAnswer]);

  return (
    <AnswerExplanation
      title={translate(
        `/personalized-relationship-analysis.${relationshipStatus}.title`
      )}
      text={translate(
        `/personalized-relationship-analysis.${relationshipStatus}.text`
      )}
      buttonType="next"
      classNameTitle={styles.title}
      classNameText={styles.text}
      handleNext={() => {
        navigate(routes.client.compatibilityV2Birthdate());
      }}
    />
  );
}

export default PersonalizedRelationshipAnalysis;
