import { Toaster } from 'react-hot-toast'
import { Outlet, useLocation } from 'react-router-dom'
import Sidebar from '../components/Sidebar'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'

export default function AppLayout() {
  const location = useLocation()

  return (
    <div className="min-h-[100svh] bg-slate-950 text-slate-100">
      <Toaster position="top-right" toastOptions={{ duration: 3500 }} />

      <div className="flex">
        <aside className="hidden md:block w-[260px] shrink-0">
          <Sidebar />
        </aside>

        <div className="flex-1 min-w-0">
          <Navbar />

          <main className="p-4 md:p-6">
            <div className="max-w-7xl mx-auto">
              <div className="mb-4">
                <div className="text-sm text-slate-400">{location.pathname}</div>
                <div className="h-2" />
              </div>

              <div className="min-h-[60svh]">
                <Outlet />
              </div>
            </div>
          </main>

          <Footer />
        </div>
      </div>
    </div>
  )
}


