import { useRouteError } from "react-router-dom";
import {
    Heading,
    Text,
    Link,
    VStack
} from "@chakra-ui/react";

const ErrorPage = () => {
    const error = useRouteError();
    console.error(error);

    return (
        <VStack id="error-page" spacing="24px" mt="4rem">
            <Heading as="h1" size="4xl">{error.status} - {error.statusText || error.message}</Heading>
            <Text fontSize="2xl">Sorry, something went wrong.</Text>
            <Link href="/">Go Back</Link>
        </VStack>
    );
};

export default ErrorPage;