import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import "./localization/i18n";
import About from "pages/Information/About";
import Help from "pages/Information/Help";
import ContactUs from "pages/Information/ContactUs";
import TermsOfUse from "pages/Information/TermsOfUse";
import PrivacyPolicy from "pages/Information/PrivacyPolicy";
import CookiesPolicy from "pages/Information/CookiesPolicy";
import AccountSettings from "pages/Information/AccountSettings";
import { store } from "store/store";
import { Provider } from "react-redux";
import { SearchResultsPage } from "pages/SearchResultsPage";
import AnArticle from "components/fetchAnArticle/AnArticle";
import NotFound from "components/fetchAnArticle/NotFound";
import AnArticleBody from "components/fetchAnArticle/AnArticleBody";

const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Failed to find the root element");
const root = ReactDOM.createRoot(rootElement);
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/about" element={<About />} />
          <Route path="/help" element={<Help />} />
          <Route path="/contact-us" element={<ContactUs />} />
          <Route path="/terms-of-use" element={<TermsOfUse />} />
          <Route path="/privacy-policy" element={<PrivacyPolicy />} />
          <Route path="/cookies-policy" element={<CookiesPolicy />} />
          <Route path="/article">
            <Route path="info/:id" element={<AnArticle />} />
            <Route path="content/:id" element={<AnArticleBody />} />
          </Route>
          <Route path="/account">
            <Route path="settings" element={<AccountSettings />} />
          </Route>
          <Route path="/search-results" element={<SearchResultsPage />} />
          <Route path="/*" element={<NotFound />}></Route>
        </Routes>
      </BrowserRouter>
    </React.StrictMode>
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();