export { reportWebVitals } from 'next-axiom'
import { useEffect } from 'react'

import type { AppProps } from 'next/app'

import { useSession, signIn, SessionProvider } from 'next-auth/react'
import Layout from '../components/layout';

import '../styles/index.css'

function Auth({ children }) {
  const { data: session, status } = useSession()
  const isUser = !!session?.user

  useEffect(() => {
    if (status === 'loading') return // Do nothing while loading
    if (!isUser) signIn() // If not authenticated, force log in
  }, [isUser, status])

  if (isUser) {
    return children
  }

  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div>Loading...</div>
}

export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <div className="flex flex-col min-h-screen">
      <SessionProvider session={session}>
        <Layout>
          {Component.authenticationRequired ? (
            <Auth>
              <Component {...pageProps} />
            </Auth>
          ) : (
            <Component {...pageProps} />
          )}
        </Layout>
      </SessionProvider>
    </div>
  )
}