import { ReloadOutlined } from "@ant-design/icons";
import { Result, Typography } from "antd";
import BackIcon from "components/Icons/BackIcon";
import { useRouteError } from "react-router-dom";

const { Paragraph, Text } = Typography;

type Error = unknown | any;

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

  return (
    <Result
      status="error"
      title="Oops!"
      subTitle="Sorry, an unexpected error has occurred."
      extra={[<BackIcon />, <ReloadOutlined />]}
    >
      <div className="desc">
        <Paragraph>
          <Text
            strong
            style={{
              fontSize: 16,
            }}
          >
            The page you tried to open has the following error:
          </Text>
        </Paragraph>
        <Paragraph copyable>{error.statusText || error.message}</Paragraph>
      </div>
    </Result>
  );
};