import '../styles/font-faces.css'
import '../styles/tokens.css'
import '../styles/theme.css'
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { FC } from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { IntlProvider } from 'react-intl'
import { useMessages } from '../src/i18n'
import { FactoryProvider } from '../components/contexts/FactoryProvider'
import { useLocale } from '../src/hooks/useLocale'

const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
  const { basePath } = useRouter()
  const messages = useMessages()
  const locale = useLocale()
  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <FactoryProvider>
        <Head>
          <link rel='icon' href={`${basePath}/favicon.ico`} />
        </Head>
        <Component {...pageProps} />
      </FactoryProvider>
    </IntlProvider>
  )
}

export default MyApp
