import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { useI18n } from '@/hooks/useI18n'

function I18nProvider({ children }: { children: React.ReactNode }) {
  const { loaded } = useI18n('fr') // Default to French, can be made dynamic based on user preference or browser locale

  if (!loaded) {
    return <div>Loading...</div>
  }

  return <>{children}</>
}

export default function App({ Component, pageProps }: AppProps) {
  return (
    <I18nProvider>
      <Component {...pageProps} />
    </I18nProvider>
  )
}