import type { PropsWithChildren, ReactNode } from "react";

interface PanelFrameProps {
  title: string;
  subtitle?: string;
  actions?: ReactNode;
}

export function PanelFrame({ title, subtitle, actions, children }: PropsWithChildren<PanelFrameProps>) {
  return (
    <section className="panel-frame">
      <header className="panel-header">
        <div>
          <h2>{title}</h2>
          {subtitle ? <p>{subtitle}</p> : null}
        </div>
        {actions ? <div className="panel-actions">{actions}</div> : null}
      </header>
      <div className="panel-body">{children}</div>
    </section>
  );
}