import '../styles/tailwind.css';
import type { AppProps } from 'next/app';
import { Suspense } from 'react';
import DefaultLayout from '../components/Layouts/DefaultLayout';

import { Provider } from 'react-redux';
import store from '../store/index';
import Head from 'next/head';
import ErrorBoundary from '../components/ErrorBoundary';

import {useRouter} from 'next/router';
import {hydrate, HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import { appWithTranslation } from 'next-i18next';
import nextI18NextConfig from '../next-i18next.config.js'


function App({ Component, pageProps }: AppProps) {
    const router = useRouter();
    const [queryClient] = React.useState(() => new QueryClient())

    
    return (
        <QueryClientProvider client={queryClient}>
             <HydrationBoundary state={pageProps.dehydratedState}>

              
                    <Provider store={store}>
                    <Suspense>
                            <Head>
                                <title>مجلة الاستثمار - أحدث المقالات والأخبار عن الاستثمار والتمويل</title>
                                <meta charSet="UTF-8" />
                                <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                            </Head>
                            <DefaultLayout>
                                <ErrorBoundary>
                                <Component {...pageProps} />
                                </ErrorBoundary>
                            
                            </DefaultLayout>
                        </Suspense>
                    </Provider>
               
             </HydrationBoundary>

        </QueryClientProvider>
    );
}

export default appWithTranslation(App, nextI18NextConfig);