_app.tsx

import { Provider } from 'react-redux'
import { useMemo } from 'react'
import { Box, ChakraProvider } from '@chakra-ui/react'
import type { AppProps } from 'next/app'
import Script from 'next/script'
import { Inter } from 'next/font/google'
import cx from 'classnames'
import Footer from '@/components/layout/Footer'
import Header from '@/components/layout/Header'
import { initializeStore } from '@/store'
import { theme } from '@/theme'
import '@/styles/globals.css'

const inter = Inter({
  subsets: ['latin', 'cyrillic'],
  display: 'swap',
})


export default function App({ Component, pageProps }: AppProps) {

  const store = useMemo(() => initializeStore({ 
    tags: { 
      tags: pageProps.tags?.results ?? []
    },
    regions: { 
      regions: pageProps.regions || [],
      selectedRegions: []
    },
    additionalServices: {
      additionalServices: pageProps.services || [],
    },
    search: {
      result: pageProps.jobs ? pageProps.jobs?.results : [],
      meta: pageProps.jobs ? { 
        count: pageProps.jobs.count, 
        next: pageProps.jobs.next, 
        previous: pageProps.jobs.previous 
      } : null
    } 
  }), [pageProps])

  return (
    <Provider store={store}>
      <ChakraProvider theme={theme}>
        <Box className={cx(inter.className, 'root')} >
          <Header />
          <Component {...pageProps} />
        </Box>
        <Footer />
      </ChakraProvider>
      <Script src="https://www.googletagmanager.com/gtag/js?id=G-4P139R7PWQ" />
      <Script id="google-analytics">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'G-4P139R7PWQ');
        `}
      </Script>
    </Provider>
  )
}