/* eslint-disable react-refresh/only-export-components */
import '@mantine/core/styles.css'
import '@mantine/notifications/styles.css'
import { LoadingOverlay, MantineProvider } from '@mantine/core'
import { Notifications } from '@mantine/notifications'
import { theme } from '@/theme'
import { Provider } from 'react-redux'
import { store } from '@/rtk/store'
import React, { Suspense } from 'react'
import { BrowserRouter, useRoutes } from 'react-router-dom'
import mainRoutes from '@/routes/main'
import classes from '@/App.module.css'
import '@mantine/dates/styles.css'

export const App = () => {
  const element = useRoutes(mainRoutes)

  return (
    <Provider store={store}>
      <MantineProvider theme={theme}>
        <React.StrictMode>
          <Suspense
            fallback={
              <LoadingOverlay
                visible={true}
                zIndex={1000}
                overlayProps={{ radius: 'sm', blur: 1 }}
              />
            }
          >
            <Notifications position="top-right" autoClose={5000} />
            <div className={classes.test}>{element}</div>
          </Suspense>
        </React.StrictMode>
      </MantineProvider>
    </Provider>
  )
}

export default () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
)
