import Header from '@components/Header'
import Navbar from '@components/Navbar'
import { useSiteContext } from '@context/SiteContext'
import { useNavigate } from '@solidjs/router'
import { onMount } from 'solid-js'

export default function Layout(props) {
  const { store } = useSiteContext()
  const navigate = useNavigate()

  onMount(() => {
    if (!store.auth) {
      navigate('/login', { replace: true })
    }
  })

  return (
    <div class="layer-top">
      <Header />
      <div id="main-page">
        <div class="drawer lg:drawer-open">
          <input id="nav-menu" type="checkbox" class="drawer-toggle" />
          <div class="drawer-content flex flex-col">
            <main class="main-content p-3">{props.children}</main>
          </div>
          <Navbar />
        </div>
      </div>
    </div>
  )
}
