import { createRootRoute, Outlet } from '@tanstack/react-router'
import { useEffect } from 'react'
import { Sidebar } from '@/components/layout/Sidebar'
import { AppHeader } from '@/components/layout/AppHeader'
import { MobileNav } from '@/components/layout/MobileNav'
import { AuthModal } from '@/features/auth/components/AuthModal'
import { useAuthStore } from '@/store/auth-store'

export const Route = createRootRoute({
  component: RootLayout,
})

function RootLayout() {
  const initialize = useAuthStore((s) => s.initialize)

  useEffect(() => {
    initialize()
  }, [initialize])

  return (
    <div className="min-h-screen bg-slate-50">
      <Sidebar />
      <AppHeader />
      <main className="lg:ml-60 pt-16 pb-20 lg:pb-0 min-h-screen">
        <Outlet />
      </main>
      <MobileNav />
      <AuthModal />
    </div>
  )
}
