import isPropValid from '@emotion/is-prop-valid'
import { Theme } from '@radix-ui/themes'
import '@radix-ui/themes/styles.css'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from 'react-query'
import { BrowserRouter } from 'react-router-dom'
import { StyleSheetManager } from 'styled-components'
import '@/app/lib/initSentry'
import { ErrorBoundary } from '@/app/providers/ErrorBoundary/ErrorBoundary'
import { App } from './app/App'


const container = document.getElementById('root')
const root = createRoot(container!)
const queryClient = new QueryClient()

root.render(
  <StrictMode>
    <ErrorBoundary>
      <BrowserRouter>
        <QueryClientProvider client={queryClient}>
          <Theme>
            <StyleSheetManager shouldForwardProp={(prop) => isPropValid(prop)}>
              <App />
            </StyleSheetManager>
          </Theme>
        </QueryClientProvider>
      </BrowserRouter>
    </ErrorBoundary>
  </StrictMode>
)