import React from 'react';
import { ThemeProvider } from '@/theme';
import { NextIntlClientProvider, useLocale, useMessages } from 'next-intl';
import { Toaster } from 'react-hot-toast';
import StoreProvider from '@/clientStore/StoreProvider';
import { AuthContextProvider } from '@/context/auth-context';
import QueryContainer from '@/components/common/QueryContainer';

type Props = {
    children?: React.ReactNode;
};

const MainProvider = ({ children }: Props) => {
    const messages = useMessages();
    const locale = useLocale();

    return (
        <AuthContextProvider>
            <NextIntlClientProvider locale={locale} messages={messages}>
                <StoreProvider>
                    {/* <Progressbar /> */}
                    <Toaster
                        position='top-center'
                        reverseOrder={false}
                        gutter={8}
                        containerClassName=''
                        containerStyle={{}}
                        toastOptions={{
                            className: '',
                            duration: 4000,
                            style: {
                                minWidth: '200px',
                                padding: '10px 30px',
                                wordBreak: 'break-word',
                            },

                            success: {
                                duration: 3500,
                            },
                            error: {
                                duration: 4000,
                            },
                        }}
                    />
                    <ThemeProvider>
                        <QueryContainer>{children}</QueryContainer>
                    </ThemeProvider>
                </StoreProvider>
            </NextIntlClientProvider>
        </AuthContextProvider>
    );
};

export default MainProvider;
