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

/**
 * The band a screen fixes above its body, one height on every screen: what
 * the section is looking at on the left, and what can be done about it on
 * the right. A ref picker, a breadcrumb, a title, a way back all stand on
 * the same line down the page whichever section is open.
 *
 * The contents and the rule under them sit in the reading column, the way
 * the home's heading does, unless `wide`, for a screen whose body takes the
 * window: there the rule runs the width of the window too.
 *
 * `tabs` lowers the band's own padding, so a row of underlined tabs sits on
 * the rule rather than floating above it.
 * @param {{actions?: import('react').ReactNode, tabs?: boolean, wide?: boolean, className?: string, children?: import('react').ReactNode}} props
 */
export function PageBar({
  actions,
  tabs = false,
  wide = false,
  className,
  children,
}) {
  return (
    <div
      className={cn(
        'shrink-0 px-(--gutter)',
        wide && 'border-border border-b',
        className,
      )}
    >
      <div
        className={cn(
          'flex min-h-8 items-center gap-3',
          tabs ? 'items-end pt-1.5' : 'py-2',
          !wide && `${MEASURE} border-border border-b`,
        )}
      >
        <div
          className={cn(
            'flex min-w-0 flex-1 flex-wrap items-center gap-3',
            tabs && 'self-stretch items-end',
          )}
        >
          {children}
        </div>
        {actions && (
          <div
            className={cn(
              'flex shrink-0 items-center gap-2',
              tabs && 'self-center pb-1.5',
            )}
          >
            {actions}
          </div>
        )}
      </div>
    </div>
  );
}