import { ReactNode, useEffect } from 'react'
import Navbar from '@/components/app/Navbar'
import { Box } from '@mui/material'
import { useRouter } from 'next/router'
import Footer from '@/components/app/Footer'
import { useUserContext } from '@/context/UserContext'

type Props = {
  children: ReactNode;
}

export default function MainLayoutProtected({ children }: Props) {
  const router = useRouter();
  const { session_valid, userData, setUserData, userSessionDataLoading } = useUserContext();

  useEffect(() => {
    if (!session_valid && !userSessionDataLoading) router.push('/login')

    if (userData.emailVerified === null) router.push('/verify-email')
  }, [ userData ])

  return (
    <Box>
      <Navbar />

      {!userSessionDataLoading && session_valid && userData.emailVerified !== null && (
        <Box sx={{ px: '1rem', maxWidth: '1400px', mx: 'auto' }}>{children}</Box>
      )}
      
      <Footer />
    </Box>    
  )
}