'use client'

import { AppSidebar } from '@/app/app-sidebar'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar'
import { MapComponent } from '@/components/map-component';
import { ThemeToggle } from '@/components/theme-toggle';
// import { Timeline } from '@/app/timeline';
import { Timeline } from '@/app/tl';
import { cn } from '@/lib/utils';
import { useMap } from './map-context'
import { format } from 'date-fns'
import { Label } from '@/components/ui/label'
import { Navigation } from './nav'
import { WSProvider } from './ws-context'
import StatusBar from './status-bar'



export default function Page() {

  return (
    <div className="flex flex-row h-full">
      <AppSidebar />
      <WSProvider>
        <div className="flex-1 relative min-h-0">
          <MapComponent />
          <div className="absolute top-0 left-0 right-0 z-10">
            <StatusBar />
          </div>
          <div className="absolute bottom-0 left-0 right-0 z-10 bg-black/20 backdrop-blur-xl m-3 border border-white/10 rounded-xl shadow-2xl overflow-hidden">
            <Timeline />
          </div>
        </div>
      </WSProvider>

    </div>
  )
}
