import { FC, useEffect } from "react";
import { useRouter } from "next/router";
import { useAuth } from "../context/UserContext";

const PrivatePage: FC<{ protectedRoutes: string[] }> = ({
  protectedRoutes,
  children,
}) => {
  const { pathname, push } = useRouter();
  const { isAuthenticated } = useAuth();

  const pathIsProtected = protectedRoutes.includes(pathname);

  useEffect(() => {
    if (!isAuthenticated && pathIsProtected) {
      push("/");
    }
  }, [isAuthenticated, pathIsProtected, push]);

  if (!isAuthenticated && pathIsProtected) {
    return (
      <div className="form-alert-msg">
        There was an error, please reload the page
      </div>
    );
  }
  return <>{children}</>;
};

export default PrivatePage;