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 ResultAnalysisResult() {
    const navigate = useNavigate()
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4)
    const { resultAnalysis } = useSelector(selectors.selectCompatibilityV4Answers)

    return (
        <AnswerExplanation
            title={translate(`/result-analysis-result.${resultAnalysis}.title`, {
                bold: <b>
                    {
                        translate(`/result-analysis-result.${resultAnalysis}.title_bold`)
                    }
                </b>
            })}
            text={translate(`/result-analysis-result.${resultAnalysis}.text`)}
            handleNext={() => {
                navigate(routes.client.compatibilityV4Review())
            }}
        />
    )
}

export default ResultAnalysisResult