import { useSuspenseQuery } from '@tanstack/react-query'
import { globalsQuery, menusQuery } from '@/lib/queries'
import { Header } from './header'
import { Footer } from './footer'

export function Shell({ children }: { children: React.ReactNode }) {
  const { data: globals } = useSuspenseQuery(globalsQuery)
  const { data: menus } = useSuspenseQuery(menusQuery)

  const mainMenu = menus.find((m) => m.id === 'MAIN_MENU')
  const footerMenu = menus.find((m) => m.id === 'FOOTER_MENU')

  return (
    <div className="mx-auto max-w-[90rem] px-4">
      <Header globals={globals} menu={mainMenu} />
      <main className="my-6">{children}</main>
      <Footer globals={globals} menu={footerMenu} />
    </div>
  )
}