import React, { useEffect } from "react";
import PropTypes from "prop-types";
import {
  RegisterSuccessfulContainer,
  RegisterDescription,
  RegisterTitle,
} from "./RegisterSuccessful.styled";
import { ReactComponent as Success } from "../../../assets/images/svg/register-success.svg";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { LOGIN_PAGE } from "../../../constants/pages";

const RegisterSuccessful = () => {
  const { t } = useTranslation();
  const history = useHistory();

  //Redirect to Login page when registration is successful
  useEffect(() => {
    setTimeout(() => {
      history.replace(LOGIN_PAGE);
    }, 2500);
  }, []);

  return (
    <RegisterSuccessfulContainer>
      <Success />

      <RegisterTitle component="h1" variant="h5">
        {t("register.success")}
      </RegisterTitle>

      <RegisterDescription component="h1" variant="h6">
        {t("register.welcome")}
      </RegisterDescription>
    </RegisterSuccessfulContainer>
  );
};

RegisterSuccessful.propTypes = {
  children: PropTypes.node,
};

export default RegisterSuccessful;
