import type { ReactNode } from "react";

/** Shared page chrome (measured): 28px/600 title, muted description, and
 *  an optional top-right action pill. Used across the global pages. */
export function PageChrome({
  title,
  description,
  action,
  children,
}: {
  title: string;
  description?: string;
  action?: ReactNode;
  children: ReactNode;
}) {
  return (
    <section className="mx-auto max-w-4xl px-8 py-12">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-xxl font-semibold tracking-tight">{title}</h1>
          {description && (
            <p className="pt-1 text-sm text-muted-foreground">{description}</p>
          )}
        </div>
        {action != null && <div className="shrink-0">{action}</div>}
      </div>
      <div className="pt-8">{children}</div>
    </section>
  );
}