// Wrapper for any main-area pane: header (title + subtitle + close) + body.
// The text-editor pane passes closable={false} so it has no close button.

"use client";

import { ReactNode } from "react";

interface PaneFrameProps {
  title: string;
  subtitle?: string;
  right?: ReactNode;
  closable?: boolean;
  onClose?: () => void;
  children: ReactNode;
}

export function PaneFrame({ title, subtitle, right, closable = true, onClose, children }: PaneFrameProps) {
  return (
    <section className="pane">
      <header className="pane-header">
        <div className="pane-titles">
          <span className="pane-title">{title}</span>
          {subtitle ? <span className="pane-subtitle">{subtitle}</span> : null}
        </div>
        <div className="pane-right">
          {right}
          {closable ? (
            <button className="pane-close" type="button" onClick={onClose} aria-label="Close pane">
              ×
            </button>
          ) : null}
        </div>
      </header>
      <div className="pane-body">{children}</div>
    </section>
  );
}