import { NextPage } from "next";
import { Typography, Box, Button, Grid, Link } from "@mui/material";
import { FC, useEffect, PropsWithChildren } from "react";
import { useRouter } from "next/router";

export const RedirectToAdmin: FC<PropsWithChildren> = ({ children }) => {
  const router = useRouter();
  useEffect(() => {
    router.push("/admin");
  });

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

const Home: NextPage = () => (
  <Box>
    <Typography variant="h3">Metamigo</Typography>
    <Grid container justifyContent="space-around" style={{ padding: 60 }}>
      <Grid item>
        <Link href="/admin">
          <Button variant="contained">Admin</Button>
          <RedirectToAdmin />
        </Link>
      </Grid>
    </Grid>
  </Box>
);

export default Home;