import type { ReactNode } from "react";
import "../styles/pages/studio-layout.css";

interface StudioToolLayoutProps {
  toolstrip?: ReactNode;
  leftPanel?: ReactNode;
  canvas: ReactNode;
  rightPanel?: ReactNode;
  statusBar?: ReactNode;
  noLeft?: boolean;
  noRight?: boolean;
  noTop?: boolean;
}

function StudioToolLayout({
  toolstrip,
  leftPanel,
  canvas,
  rightPanel,
  statusBar,
  noLeft,
  noRight,
  noTop,
}: StudioToolLayoutProps) {
  return (
    <div
      className={`studio-tool-layout${noLeft ? " studio-tool-layout--no-left" : ""}${
        noRight ? " studio-tool-layout--no-right" : ""
      }${noTop ? " studio-tool-layout--no-top" : ""}`}
    >
      {!noTop ? <div className="studio-toolstrip">{toolstrip}</div> : null}
      {!noLeft ? <aside className="studio-panel studio-panel--left">{leftPanel}</aside> : null}
      <section className="studio-canvas">{canvas}</section>
      {!noRight ? <aside className="studio-panel studio-panel--right">{rightPanel}</aside> : null}
      <footer className="studio-status-bar">{statusBar}</footer>
    </div>
  );
}

export default StudioToolLayout;