import React from "react";
import AuthGuard from "@/components/auth/AuthGuard";
import { Sidebar } from "@/components/dashboard/Sidebar";
import { MobileNav } from "@/components/dashboard/MobileNav";
import { Header } from "@/components/dashboard/Header";

import { NotificationMonitor } from "@/components/dashboard/NotificationMonitor";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <AuthGuard>
      <NotificationMonitor />
      <div className="flex min-h-screen bg-background">
        {/* Mobile Navigation */}
        <MobileNav />

        {/* Desktop Sidebar */}
        <aside className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
          <Sidebar />
        </aside>
        
        {/* Main Content Area */}
        <div className="md:pl-64 flex flex-col flex-1">
          <Header />
          <main className="flex-1">
            <div className="py-6 px-4 sm:px-6 md:px-8">
              {children}
            </div>
          </main>
        </div>
      </div>
    </AuthGuard>
  );
}