import { useEffect } from "react";
import { signIn, useSession } from "next-auth/react";

import Box from "../components/Box";
import Spinner from "../components/Spinner";

const SignInPage = () => {
  const { data: session, status } = useSession();

  useEffect(() => {
    if (status !== "loading" && !session)
      void signIn("github", { redirect: false });
    if (status !== "loading" && session) window.close();
  }, [session, status]);

  return (
    <Box
      css={{
        display: "flex",
        backgroundColor: "$mauve1",
        position: "absolute",
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        zIndex: 9999,
        textAlign: "center",
        justifyContent: "center",
        alignItems: "center",
        gap: "$2",
      }}
    >
      Logging in <Spinner />
    </Box>
  );
};

export default SignInPage;