"use client";

import type { ReactNode } from "react";

import { SecondaryHeader } from "@/components/secondary-header";

export type SecondaryPageShellProps = {
  readonly title: string;
  readonly note?: ReactNode;
  readonly actions?: ReactNode;
  readonly waiting?: string | null;
  readonly children?: ReactNode;
};

/**
 * Shared chrome for /chart, /ephemeris and /reports.
 *
 * Header and body stay siblings of `.chat-panel` so the existing 46px + 1fr
 * grid still owns height. The body cell (`.secondary-page`) always fills the
 * remaining viewport; waiting copy is centered in that cell, so swapping in
 * the tall content cannot push the shell.
 */
export function SecondaryPageShell({
  title,
  note,
  actions,
  waiting,
  children,
}: SecondaryPageShellProps) {
  return (
    <>
      <SecondaryHeader title={title} note={note} reserveNote actions={actions} />
      <div className="secondary-page">
        {waiting ? <p className="secondary-page-waiting">{waiting}</p> : children}
      </div>
    </>
  );
}