import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
import { createTheme, MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { UserProvider } from '@components/context/UserProvider.tsx';
import { BrowserRouter, Route, Routes } from 'react-router';
import { Profile } from '@components/Profile.tsx';
import { Administration } from '@components/Administration.tsx';
import { NotFound } from '@components/NotFound';

const theme = createTheme({
  fontFamily: 'Inter, sans-serif'
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <MantineProvider theme={theme} defaultColorScheme={'dark'}>
        <Notifications zIndex={2000} />
        <UserProvider>
          <Routes>
            <Route path='/' element={<App />} />
            <Route path='/profile' element={<Profile />} />
            <Route path='/administration' element={<Administration />} />
            <Route path='*' element={<NotFound />} />
          </Routes>
        </UserProvider>
      </MantineProvider>
    </BrowserRouter>
  </StrictMode>
);