import Head from 'next/head'
import '../styles/globals.css'
import createEmotionCache from '../styles/createEmotionCache'
import { EmotionCache } from '@emotion/cache'
import { CacheProvider, ThemeProvider } from '@emotion/react'
import Header from '@components/Header'

import '../styles/globals.css'
import theme from '../styles/theme'
import { CssBaseline } from '@mui/material'
import Footer from '@components/Footer'

const clientSideEmotionCache: EmotionCache = createEmotionCache()

function MyApp(props: any) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>Project FaaS</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Header />
        <Component {...pageProps} />
        <Footer/>
      </ThemeProvider>
    </CacheProvider>
  )
}

export default MyApp
