import React from "react";
import WorkspacesListCard from "./WorkspacesListCard";
import { AuthContext } from "@/context/Auth";
import { GlobalContext } from "@/context/Global";

export const PmBoardsPage = ({
  workspacesList,
  handleWorkspaceListCardNavClick,
  handleWorkspaceBoardClick,
}) => {
  const { dispatch } = React.useContext(AuthContext);
  const { dispatch: globalDispatch } = React.useContext(GlobalContext);
  // const workspaces = useOutletContext();
  // const list = JSON.parse(workspaces);

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

  return (
    <>
      <div className="h-full overflow-y-auto p-7">
        <h2 className="mb-4 text-[16px] text-[#5e6c84]">YOUR WORKSPACES</h2>
        {workspacesList.map((ws, index) => (
          <WorkspacesListCard
            key={index}
            ws={ws}
            handleWorkspaceListCardNavClick={handleWorkspaceListCardNavClick}
            handleWorkspaceBoardClick={handleWorkspaceBoardClick}
          />
        ))}
      </div>
    </>
  );
};
