import { COLUMN } from '#/lib/layout.js';
import { cn } from '#/lib/utils.js';

/**
 * The shape every screen takes inside the shell: a band that stays put at
 * the top, and a body that takes what the window has left and scrolls on its
 * own. The bar, the tabs and the band all stand still; only the reading
 * area moves.
 *
 * `bar` is what the screen fixes above its body: a toolbar, a row of tabs, a
 * heading. A screen with nothing to fix passes none and the body starts at
 * the top. The body sits in the reading column; `wide` gives it the whole
 * window, for a screen laid out in panes.
 * @param {{bar?: import('react').ReactNode, wide?: boolean, className?: string, bodyClassName?: string, children: import('react').ReactNode}} props
 */
export function Screen({
  bar,
  wide = false,
  className,
  bodyClassName,
  children,
}) {
  return (
    <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
      {bar}
      <div className={cn('min-h-0 flex-1 overflow-y-auto', bodyClassName)}>
        {wide ? children : <div className={COLUMN}>{children}</div>}
      </div>
    </div>
  );
}