// import { SyncActiveOrgFromUrl } from "./sync-active-org-from-url";
import { Dashboard } from "@/components/dashboard";
import { TopNav } from "@/components/top-nav";
import { cookies } from "next/headers";

export default function WorkspaceLayout(props: {
  children: React.ReactNode;
  params: { workspaceId: string };
}) {
  const layout = cookies().get("react-resizable-panels:layout");
  const collapsed = cookies().get("react-resizable-panels:collapsed");

  const defaultLayout = layout?.value ? JSON.parse(layout.value) : undefined;
  const defaultCollapsed = collapsed?.value ? JSON.parse(collapsed.value) : undefined;


  return (
    <>
      {/* TODO: Nuke it when we can do it serverside in Clerk! */}
      {/* <SyncActiveOrgFromUrl /> */}
      <div className="min-h-screen rounded-[0.5rem]">
      <TopNav/>

      <main className="min-h-[calc(100vh-53px)] flex-1 space-y-4">
      <Dashboard
        defaultLayout={defaultLayout}
        defaultCollapsed={defaultCollapsed}
        navCollapsedSize={4}
      >
        {props.children}
      </Dashboard>
      </main>
      </div>
    </>
  );
}