import type { ReactNode } from "react";

/** Panel with header (title + optional tools) and body. */
export function Panel({
  title,
  subtitle,
  tools,
  children,
  flush = false,
  className = "",
}: {
  title?: ReactNode;
  subtitle?: ReactNode;
  tools?: ReactNode;
  children: ReactNode;
  /** Remove body padding (for tables that span the full width). */
  flush?: boolean;
  className?: string;
}) {
  return (
    <section className={`panel ${className}`.trim()}>
      {title || tools ? (
        <header className="panel-header">
          <div>
            {title ? <h2>{title}</h2> : null}
            {subtitle ? <div className="panel-subtitle">{subtitle}</div> : null}
          </div>
          {tools ? <div className="panel-tools">{tools}</div> : null}
        </header>
      ) : null}
      <div className={`panel-body${flush ? " flush" : ""}`}>{children}</div>
    </section>
  );
}
