import React from "react";
import Image from "../../../../Ui/Image";
import { useModalTabsState } from "../../../../../zustand/ModalTabsState";
import { useModalState } from "../../../../../zustand/Modal";
import { useFormikContext } from "formik";
import { useTranslation } from "react-i18next";

const Successful = () => {
  const { setActiveTab } = useModalTabsState((state) => state);
  const { setIsOpen } = useModalState((state) => state);
  const formik = useFormikContext<any>();
  const [t] = useTranslation();
  return (
    <div className="AddedSuccessfully">
      <Image src="/DataState/successfully.png" />
      <h1> {t("header.Student_added_successfully")} </h1>
      <p>
        {t(
          "header.the_student_has_been_added_Do_you_want_to_add_another_student",
        )}
      </p>

      <div className="TowButton">
        <button
          onClick={() => {
            setActiveTab(0);
            formik?.resetForm();
          }}
        >
          {t("header.Add_a_new_student")}
        </button>
        <button
          onClick={() => {
            setIsOpen("");
            setActiveTab(0);
            formik?.resetForm();
          }}
        >
          {t("practical.skip")}
        </button>
      </div>
    </div>
  );
};

export default Successful;
