import './instrument.ts';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import '@mantine/core/styles.css';
import '@mantine/charts/styles.css';
import App from './App.tsx';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from '@/context/tanstack-provider.tsx';
import { MantineProvider } from '@mantine/core';
import { HeroUIProvider } from '@heroui/react';
import { Toaster } from './components/ui/sonner.tsx';
import * as Sentry from '@sentry/react';
// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
      <QueryClientProvider client={queryClient}>
        <HeroUIProvider>
          <MantineProvider>
            <App />
          </MantineProvider>
        </HeroUIProvider>

        <Toaster
          position="bottom-right"
          expand={true}
          richColors={true}
          closeButton={true}
        />

        {/* <ReactQueryDevtools
          initialIsOpen={false}
          buttonPosition="bottom-left"
        /> */}
      </QueryClientProvider>
    </Sentry.ErrorBoundary>
  </StrictMode>
);