import React from "react";
import { Outlet } from "react-router";
import MkdSDK from "@/utils/MkdSDK";
import { AuthContext } from "@/context/Auth";
import { GlobalContext } from "@/context/Global";
import { WorkspaceSidebar } from "./WorkspaceSidebar";
import { DashboardViewScreen } from "./DashboardViewScreen";

export const PmWorkspacePage = ({ activeWorkspaceId }) => {
  const { dispatch } = React.useContext(AuthContext);
  const { dispatch: globalDispatch } = React.useContext(GlobalContext);
  const sdk = new MkdSDK();

  React.useEffect(() => {
    globalDispatch({
      type: "SETPATH",
      payload: {
        path: activeWorkspaceId,
      },
    });
  }, [activeWorkspaceId]);

  return (
    <>
      <div className={`capitalize`}>
        <div className="flex h-screen w-full items-center justify-center text-7xl text-gray-700 ">
          <div
            className={`mx-auto grid h-screen w-[90%] grid-cols-[30%_78%]  justify-center   gap-[1%]`}
          >
            <WorkspaceSidebar />

            <DashboardViewScreen>
              <Outlet />
            </DashboardViewScreen>
          </div>
        </div>
      </div>
    </>
  );
};
