"use client";

import { useLabWebConsoles } from "@/components/labs/lab-web-consoles-context";
import { ScrollArea } from "@/components/ui/scroll-area";
import { type ReactNode } from "react";
import "./lab-layout-v3.scss";

export interface LabLayoutV3Props {
  main?: ReactNode;
  side?: ReactNode;
  nav?: ReactNode;
  sideFooter?: ReactNode;
  mainFooter?: ReactNode;
  consoleConstraint?: ReactNode;
}

export function LabLayoutV3({
  main,
  side,
  nav,
  mainFooter,
  sideFooter,
  consoleConstraint,
}: LabLayoutV3Props) {
  const { consoles } = useLabWebConsoles();
  const focusMode = consoles.length > 0;

  return (
    <div
      className="Lab-root mx-auto"
      data-mode={focusMode ? "focus" : "default"}
    >
      <div className="Lab-side">{side}</div>
      <ScrollArea className="Lab-main">{main}</ScrollArea>
      <div className="Lab-nav">{nav}</div>
      <div className="Lab-consoles">{consoleConstraint}</div>
      <div className="Lab-side-footer">{sideFooter}</div>
      <div className="Lab-main-footer">{mainFooter}</div>
    </div>
  );
}