// import { LayoutMain } from '@/modules/layout'
const LayoutMain = null;
import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Toaster } from '@/components/ui/sonner'
import { AuthProvider } from '@/pages/auth'
import { TooltipProvider } from '@/components/ui/tooltip'
import { Home } from 'lucide-react';
export const Route = createRootRoute({
  component: RootComponent,
})

const BaseHeader = (props: { main?: React.ComponentType | null }) => {
  if (props.main) {
    const MainComponent = props.main
    return <MainComponent />
  }
  return (
    <>
      <div className="flex gap-2 text-lg w-full h-12 items-center">
        <div className='px-2'>
          <Link
            to="/"
            activeProps={{
              className: 'font-bold',
            }}
            activeOptions={{ exact: true }}
          >
            <Home className='w-5 h-5' />
          </Link>
        </div>
      </div>
      <hr />
    </>
  )
}
function RootComponent() {
  return (
    <div className='h-full overflow-hidden'>
      <BaseHeader main={LayoutMain} />
      <AuthProvider mustLogin={true}>
        <TooltipProvider>
          <main className='h-[calc(100%-3rem)] overflow-auto scrollbar'>
            <Outlet />
          </main>
        </TooltipProvider>
      </AuthProvider>
      <TanStackRouterDevtools position="bottom-right" />
      <Toaster />
    </div>
  )
}