import React from "react";
import { Outlet, RouterProvider } from "react-router-dom";
import { createBrowserRouter } from "react-router-dom";

import { ErrorBoundary } from "../components/ErrorBoundary";
import Dashboard from "./Dashboard";

const Layout: React.FC = () => {
  return (
    <ErrorBoundary>
      <Outlet />
    </ErrorBoundary>
  );
};

const NotFound = React.lazy(() => import("./NotFound"));

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Dashboard />,
      },
      {
        path: "*",
        element: <NotFound />,
      },
    ],
  },
]);

const Router = (): JSX.Element => {
  return <RouterProvider router={router} />;
};

export default Router;