import { FC, useEffect } from "react";
import { CircularProgress } from "@material-ui/core";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";

export const Auth: FC = ({ children }) => {
  const router = useRouter();
  const { data: session, status: loading } = useSession();
  useEffect(() => {
    if (!session && !loading) {
      router.push("/login");
    }
  }, [session, loading]);

  if (loading) {
    return <CircularProgress />;
  }

  return <>{children}</>;
};