import { Sidebar, MobileSidebar } from "@/components/sidebar";
import { Providers } from "@/components/providers";
import { ThemeToggle } from "@/components/theme-toggle";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Providers>
      <div className="flex h-screen flex-col overflow-hidden md:flex-row">
        {/* Mobile Header */}
        <header className="flex h-16 items-center justify-between border-b bg-card px-4 md:hidden">
          <div className="flex items-center gap-3">
            <MobileSidebar />
            <h1 className="text-lg font-bold">Scrapy UI</h1>
          </div>
          <ThemeToggle />
        </header>

        {/* Desktop Sidebar */}
        <Sidebar />

        {/* Main Content */}
        <main className="flex-1 overflow-y-auto">
          <div className="container p-4 md:p-6">{children}</div>
        </main>
      </div>
    </Providers>
  );
}