import { CssBaseline } from '@mui/material'
import { createTheme, ThemeProvider } from '@mui/material/styles'
import { appWithTranslation } from 'next-i18next'

import 'reset-css'
import '../styles/global.scss'
import Layout from '../components/layout'
import WithYandexMetrika from '../components/WithYandexMetrika'

function App ({ Component, pageProps }) {
  const theme = createTheme({
    palette: {
      mode: 'light'
    }
  })

  return (
    <WithYandexMetrika>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ThemeProvider>
    </WithYandexMetrika>
  )
}

export default appWithTranslation(App)
