import { createRootRoute, Outlet } from '@tanstack/react-router'
// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
import { TanStackRouterDevtoolsInProd } from '@tanstack/react-router-devtools'
import { Header, Footer, TabBar } from '@/components'

export const Route = createRootRoute({
  component: () => (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main 
        className="flex-grow"
        style={{
          paddingTop: `calc(5rem + env(safe-area-inset-top, 0px))`,
          paddingBottom: `calc(4rem + env(safe-area-inset-bottom, 0px))`
        }}
      >
        <Outlet />
      </main>
      <Footer />
      <TabBar />
      <TanStackRouterDevtoolsInProd initialIsOpen={false}/>
    </div>
  ),
})