FPSMS-frontend/src/components/PoWorkbench/PoWorkbenchRegion.tsx

"use client";

import Box from "@mui/material/Box";
import type { ReactNode } from "react";
import type { WorkbenchGridRegionId } from "@/components/PoWorkbench/mock/workbenchMockData";

export interface PoWorkbenchRegionProps {
  /** Which pane to render; must match {@link WorkbenchGridRegionId}. */
  region: WorkbenchGridRegionId;
  children?: ReactNode;
}

const basePaneSx = {
  minWidth: 0,
  minHeight: 0,
  height: "100%",
  display: "flex",
  flexDirection: "column" as const,
  border: 1,
  borderColor: "divider",
  bgcolor: "background.paper",
  boxSizing: "border-box" as const,
};

/**
 * One scrollable pane in the PO Workbench grid.
 *
 * Right-column panes (`detailsHeader`, `details`) use an outer rounded wrapper with
 * `overflow: hidden` so `borderTopRightRadius` / `borderBottomRightRadius` stay visible;
 * scroll lives on an inner box.
 *
 * @remarks
 * The root sets `data-workbench-region` to the `region` value for automated tests and debugging.
 * Values are stable and correspond to {@link WorkbenchGridRegionId}.
 */
export default function PoWorkbenchRegion({
  region,
  children,
}: PoWorkbenchRegionProps) {
  const isDetailsHeader = region === "detailsHeader";
  const isDetailsBody = region === "details";
  const useRoundedRightShell = isDetailsHeader || isDetailsBody;

  if (useRoundedRightShell) {
    return (
      <Box
        data-workbench-region={region}
        sx={{
          ...basePaneSx,
          overflow: "hidden",
          ...(isDetailsHeader ? { borderTopRightRadius: 16 } : {}),
          ...(isDetailsBody ? { borderBottomRightRadius: 16 } : {}),
        }}
      >
        <Box
          sx={{
            flex: 1,
            minHeight: 0,
            overflow: "auto",
            display: "flex",
            flexDirection: "column",
          }}
        >
          {children}
        </Box>
      </Box>
    );
  }

  return (
    <Box
      data-workbench-region={region}
      sx={{
        ...basePaneSx,
        overflow: "auto",
      }}
    >
      {children}
    </Box>
  );
}