//main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import {
  Home,
  About,
  Location,
  Career,
  ErrorPage,
} from './pages/ExportPagesComponents.jsx';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: '/about',
        element: <About />,
        children: [
          {
            path: ':id',
            element: <About />,
          },
        ],
      },
      {
        path: '/location',
        element: <Location />,
      },
      {
        path: '/career',
        element: <Career />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

//Show the child element we created inside the App.jsx
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <>
      <Navigation />
      <Outlet /> //This is where the dynamic content of the child elements will show up
      <Footer />
    </>
  );
}

export default App;

//Handling error page!!
//ErrorPage.jsx
import { useRouteError } from 'react-router-dom';

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

  return (
    <div id="error-page">
      <h1>
        {error.status} {error.statusText}{' '}
      </h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p>
        <i>{error.message}</i>
      </p>
    </div>
  );
};

export default ErrorPage;