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

    return (
        <AnswerExplanation
            title={translate(`/calculate-in-advance-result.${calculateInAdvance}.title`)}
            text={translate(`/calculate-in-advance-result.${calculateInAdvance}.text`)}
            handleNext={() => {
                navigate(routes.client.compatibilityV4Birthplace())
            }}
        />
    )
}

export default CalculateInAdvanceResult