import React from "react";
import { DashboardSidebar } from "../DashboardSidebar";
import { DashboardViewScreen } from "../DashboardViewScreen";

const LandingWrapper = ({ list, children, setWorkspaces }) => {
  const [activeLeftPanel, setActiveLeftPanel] = React.useState("default");
  const [activeWorkspaceId, setActiveWorkspaceId] = React.useState();
  const [activeBoardId, setActiveBoardId] = React.useState();

  return (
    <>
      <div className="h-screen w-full items-center justify-center text-7xl text-gray-700 ">
        <div
          className={`mx-auto grid h-full w-[90%] grid-cols-[30%_78%] justify-center gap-[1%]`}
        >
          <DashboardSidebar
            list={list}
            setWorkspaces={setWorkspaces}
            activeLeftPanel={activeLeftPanel}
            setActiveLeftPanel={setActiveLeftPanel}
            activeWorkspaceId={activeWorkspaceId}
            setActiveWorkspaceId={setActiveWorkspaceId}
          />

          <DashboardViewScreen
            workspacesList={list}
            activeWorkspaceId={activeWorkspaceId}
            setActiveWorkspaceId={setActiveWorkspaceId}
            activeLeftPanel={activeLeftPanel}
            setActiveLeftPanel={setActiveLeftPanel}
            activeBoardId={activeBoardId}
            setActiveBoardId={setActiveBoardId}
          >
            {children}
          </DashboardViewScreen>
        </div>
      </div>
    </>
  );
};
export default LandingWrapper;
