"use client";

import { useState, type ReactNode } from "react";
import { DashboardHeader } from "./dashboard-header";
import { DashboardRouteGuard } from "./dashboard-route-guard";
import { DashboardSidebar } from "./dashboard-sidebar";

export function DashboardShell({ children }: { children: ReactNode }) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className="flex min-h-screen gap-4 bg-slate-100 p-4 sm:gap-6 sm:p-8">
      <DashboardSidebar collapsed={collapsed} onCollapsedChange={setCollapsed} />
      <div className="min-w-0 flex-1">
        <DashboardHeader />
        <main className="mt-6">
          <DashboardRouteGuard>{children}</DashboardRouteGuard>
        </main>
      </div>
    </div>
  );
}