import { AppProps } from "next/app";
import { useRouter } from "next/router";
import { NextIntlClientProvider } from "next-intl";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "../../store/index";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "../../styles/animate.css";
import "../../styles/flaticon.css";
import "../../styles/font-awesome.min.css";
import "../../styles/themify-icons.css";
import "../../styles/sass/style.scss";
import "react-toastify/dist/ReactToastify.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Head from "next/head";
import { CssBaseline, Container } from '@mui/material';
export default function App({ Component, pageProps }) {
  const router = useRouter();
  const { locale } = useRouter();
  console.log("locale : ", locale);
  return (
    <div style={{ direction: locale === "ar" ? "rtl" : "ltr" }}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <NextIntlClientProvider
            locale={router.locale}
            messages={pageProps.messages}
            timeZone="Europe/Vienna"
          >
            {/* <Container> */}
            <CssBaseline />
            <Component {...pageProps} />
            {/* </Container> */}
            <ToastContainer />
          </NextIntlClientProvider>
        </PersistGate>
      </Provider>
    </div>
  );
}
export async function getStaticProps({ locale }) {
  return {
    props: {
      messages: (await import(`../../messages/${locale}.json`)).default,
    },
  };
}