import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { setupAxiosInterceptors } from "./api/AxiosService";
import "./main.css";
import router from "./routes";
import ConfirmationDialogProvider from "./components/ConfirmationDialog/ConfirmationDialogProvider";

setupAxiosInterceptors();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
	<React.StrictMode>
		{/* fallbackElement - use when routing table is quite big to load, it will display desired element in convention of loading screen */}
		<ConfirmationDialogProvider>
			<RouterProvider
				router={router}
				fallbackElement={<p>Loading route table...</p>}
			/>
		</ConfirmationDialogProvider>
	</React.StrictMode>,
);