"use client";

import { isFullBleedMainRoute } from "@/app/(main)/isFullBleedMainRoute";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

type MainLayoutBodyProps = {
  appBar: ReactNode;
  mainContent: ReactNode;
};

/**
 * On `/po/workbench`, wraps the AppBar and main in a `100dvh` flex column so `<main>` can
 * use `flex: 1` instead of `calc(100dvh - 56/64px)` (which misses the real AppBar height).
 */
export default function MainLayoutBody({
  appBar,
  mainContent,
}: MainLayoutBodyProps) {
  const pathname = usePathname();
  const isWorkbench = isFullBleedMainRoute(pathname);

  if (isWorkbench) {
    return (
      <div className="flex h-[100dvh] min-h-0 w-full flex-col overflow-hidden">
        <div className="shrink-0">{appBar}</div>
        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
          {mainContent}
        </div>
      </div>
    );
  }

  return (
    <>
      {appBar}
      {mainContent}
    </>
  );
}