// react-query
// react
import { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
// helmet
import { HelmetProvider } from 'react-helmet-async'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// vercel analytics
import { Analytics } from '@vercel/analytics/react'
// svg icons
import 'virtual:svg-icons-register'
import './theme/theme.css'
import ProgressBar from './components/progress-bar'
// mock api
// import worker from './_mock'
// root component
import App from './App'
// css
import './global.css'
// i18n
import './locales/i18n'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

root.render(
  <HelmetProvider>
    <QueryClientProvider client={new QueryClient()}>
      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
      <Suspense>
        <ProgressBar />
        <Analytics />
        <App />
      </Suspense>
    </QueryClientProvider>
  </HelmetProvider>
)

// 🥵 start service worker mock in development mode
// worker.start({ onUnhandledRequest: "bypass" });