import { ProtectedRoute } from "@/components/auth/ProtectedRoute";
import DashboardTopBar from "@/components/section/DashboardTopBar";
import Sidebar from "@/components/section/Sidebar";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ProtectedRoute>
      <div className="flex h-screen overflow-hidden bg-slate-50">
        <Sidebar />
        {/* Contenido principal que se ajusta dinámicamente al sidebar */}
        <div className="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in-out ml-16 lg:ml-64">
          <DashboardTopBar />
          <main className="flex-1 overflow-y-auto">
            <div className="container mx-auto p-6">{children}</div>
          </main>
        </div>
      </div>
    </ProtectedRoute>
  );
}