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

import { useSession, signIn, SessionProvider } from 'next-auth/react'
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}>
        {Component.authenticationRequired ? (
          <Auth>
            <Component {...pageProps} />
          </Auth>
        ) : (
          <Component {...pageProps} />
        )}
      </SessionProvider>
    </div>
  )
}