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

function ImportantStep() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);

  return (
    <AnswerExplanation
      title={translate(`/important-step.title`)}
      text={translate(`/important-step.text`)}
      buttonType="next"
      classNameTitle={styles.title}
      classNameText={styles.text}
      handleNext={() => {
        navigate(routes.client.compatibilityV2WhoMatter());
      }}
    />
  );
}

export default ImportantStep;