// npm install react-router-dom

// main.jsx
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

//create your sites pages and then import them.
import { Navigation, Footer } from './components/ExportComponents';
import { ThemeProvider } from 'styled-components';
import { light, dark } from './components/styles/Theme.styled';
import { Routes, Route } from 'react-router-dom';
import {
  Home,
  About,
  Location,
  Career,
  ErrorPage,
} from './pages/ExportPagesComponents.jsx';

function App() {
  return (
    <ThemeProvider theme={light}>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} errorElement={<ErrorPage />} />
        <Route path="/about" element={<About />} />
        <Route path="/location" element={<Location />} />
        //Nesting Routes!
        <Route path="/career" element={<Career />} >
          	//the /:id is any id 
        	<Route path=":id" element={<CareerDescription />} />
        </Route>
        //If no url match was found * then show error page(404)
        <Route path='*' element={<ErrorPage />}/>
      </Routes>
	  <Footer/>
    </ThemeProvider>
  );
}

export default App;

//What is inside the App will render on every page, so the nav and the footer can be added here to apppear on every page.