import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import Internationalization from 'components/internaltionalization';
import { GlobalSpin } from 'components/spin';
import { queryClient } from 'queries';
import { Suspense } from 'react';
import { createRoot } from 'react-dom/client';
import AppRoutes from 'routes';

import 'antd/dist/reset.css';
import './theme/compose.scss';

function App() {
  return (
    <Suspense fallback={<GlobalSpin />}>
      <QueryClientProvider client={queryClient}>
        <Internationalization>
          {/* <AbilityContext.Provider value={appAbilitiy}> */}
          <AppRoutes />
          {/* </AbilityContext.Provider> */}
        </Internationalization>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Suspense>
  );
}

const container = document.getElementById('root')!;
const root = createRoot(container);
root.render(<App />);