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

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

  return (
    <AnswerExplanation
      title={translate(
        `/relationship-status-result.${relationshipStatus}.title`
      )}
      text={translate(`/relationship-status-result.${relationshipStatus}.text`)}
      handleNext={() => {
        navigate(routes.client.compatibilityV2FearInRelationship());
      }}
    />
  );
}

export default RelationshipStatusResult;