import { Outlet } from '@tanstack/react-router'

import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
import { useNavigationProgress } from '@/hooks/use-navigation-progress'

import { AppHeader } from './components/app-header.tsx'
import { AppSidebar } from './components/app-sidebar'

export default function Layout({ children }: { children?: React.ReactNode }) {
  useNavigationProgress()

  return (
    <SidebarProvider
      style={
        {
          '--sidebar-width': '14rem',
          '--sidebar': '#ffffff',
        } as React.CSSProperties
      }
    >
      <AppSidebar />
      <SidebarInset className='h-svh h-screen min-w-0'>
        <AppHeader />
        <div className='flex-1 overflow-y-auto min-h-0 p-4 bg-[#f5f5f5] flex flex-col'>
          <div className='bg-white rounded-md p-6 flex-1 shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)]'>
            {children ?? <Outlet />}
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}