import { useState } from "react";

import { Outlet } from "react-router";
import Sidebar from "../../../components/admin/dashboards/Sidebar";
import Topbar from "../../../components/admin/dashboards/Topbar";

export default function DashboardLayout() {
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div className="flex min-h-screen bg-background">
      {/* Sidebar */}
      <Sidebar isCollapsed={isCollapsed} />

      <div className="flex flex-1 flex-col">
        {/* Topbar */}
        <Topbar
          toggleSidebar={() => setIsCollapsed(!isCollapsed)}
          isCollapsed={isCollapsed}
        />

        {/* Main Content */}
        <main className="p-6 transition-all duration-300">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
