import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import Button from "../../components/Button";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";

function AlmostThere() {
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);

    const handleNext = () => {
        navigate(`${routes.client.compatibilityV4RelateFollowing()}/1`)
    }

    return (
        <div className={styles.container}>
            <Title variant="h2" className={styles.title}>
                {translate("/almost-there.title")}
            </Title>
            <p className={styles.description}>
                {translate("/almost-there.description")}
            </p>
            <Button
                className={styles.button}
                onClick={handleNext}
            >
                {translate("next")}
            </Button>
        </div>
    )
}

export default AlmostThere