import AnswerExplanation from "@/components/CompatibilityV4/templates/AnswerExplanation"
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"

function StressResponseResult() {
    const navigate = useNavigate()
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4)
    const { stressResponse, relationshipStatus } = useSelector(selectors.selectCompatibilityV4Answers)
    const isSingle = relationshipStatus === "single"

    return (
        <AnswerExplanation
            title={translate(`/stress-response-result${isSingle ? ".single" : ""}.${stressResponse}.title`, {
                bold: <b>
                    {
                        translate(`/stress-response-result${isSingle ? ".single" : ""}.${stressResponse}.title_bold`)
                    }
                </b>
            })}
            text={translate(`/stress-response-result${isSingle ? ".single" : ""}.${stressResponse}.text`)}
            handleNext={() => {
                navigate(routes.client.compatibilityV4WhatAddToAnalysis())
            }}
        />
    )
}

export default StressResponseResult