import { Splash } from '@/widgets/splash/splash';
import { Suspense } from 'react';
import { RecoilRoot } from 'recoil';
import { CookiesProvider } from 'react-cookie';
import { QueryClientProvider } from '@tanstack/react-query';
import { GlobalErrorBoundary } from '@/widgets/error-boundaries';
import { getGlobalQueryClient } from '@/shared/configs/query';
import '@/locales/i18n';

interface AppProviderProps {
  children: React.ReactNode;
};

export const AppProvider = ({ 
  children
}: AppProviderProps) => {
  return (
    <GlobalErrorBoundary>
      <RecoilRoot>
        <QueryClientProvider client={getGlobalQueryClient()}>
          <Suspense fallback={<Splash />}>
            <CookiesProvider>{children}</CookiesProvider>
            {/* <ReactQueryDevtools /> */}
          </Suspense>
        </QueryClientProvider>
      </RecoilRoot>
    </GlobalErrorBoundary>
  );
};