import { StrictMode } from 'react';

import { ChakraProvider } from '@chakra-ui/react';
import ReactDOM from 'react-dom/client';

import App from '@/App';

import { ColorModeProvider } from './components/ui/color-mode';
import { Toaster } from './components/ui/toaster';
import { systemTheme } from './theme/theme';

// Render the app
const rootElement = document.getElementById('root') as HTMLElement;
if (rootElement && !rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <ColorModeProvider>
        <ChakraProvider value={systemTheme}>
          <App />
          <Toaster />
        </ChakraProvider>
      </ColorModeProvider>
    </StrictMode>
  );
}