import {
  Box,
  Button,
  Center,
  Grid,
  Heading,
  Image,
  Link,
  Text,
} from "@chakra-ui/react";
import { m } from "framer-motion";
import { useNavigate } from "react-router-dom";

const Page404 = () => {
  const navigate = useNavigate();

  const handleBackToHome = () => navigate("/");

  return (
    <Grid gap={4} textAlign="center">
      <Heading>Page not Found</Heading>

      <Box maxWidth={[280, 400]} marginX="auto">
        <m.h1
          transition={{ type: "tween", ease: "circOut", duration: 1 }}
          animate={{ scale: 1 }}
          initial={{ scale: 0 }}
          style={{ fontSize: "8rem" }}
        >
          404
        </m.h1>
      </Box>

      <Center flexDirection="column">
        <Button onClick={handleBackToHome}>Go back home</Button>
      </Center>
    </Grid>
  );
};

export default Page404;
