import { NextPage } from "next";
import { useSession, signOut } from "next-auth/react";
import Router from "next/router";
import { useEffect } from "react";
import Button from "@/components/button";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

const Home: NextPage = (): JSX.Element => {
  const { status, data } = useSession();
  console.log(status, data);

  useEffect(() => {
    if (status === "unauthenticated") Router.replace("/");
  }, [status]);

  const handleSignOut = () => {
    signOut();
  };

  if (status === "authenticated")
    return (
      <Container maxWidth="xl">
        <Box
          sx={(theme) => ({
            marginTop: theme.spacing(8),
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          })}
        >
          <Typography>Welcome to the Home Page!</Typography>
          <Button onClick={handleSignOut}>Sign Out</Button>
        </Box>
      </Container>
    );

  return <div>loading</div>;
};

export default Home;