import type { ReactNode } from "react";

interface PanelProps {
  /** Optional header title. When omitted, no header bar is rendered. */
  title?: ReactNode;
  /** Optional right-aligned header slot (actions, counts). */
  actions?: ReactNode;
  /** Remove default body padding (e.g. when embedding a flush table). */
  flush?: boolean;
  className?: string;
  children: ReactNode;
}

/** A bordered surface card. The base building block for content panels. */
export function Panel({ title, actions, flush, className, children }: PanelProps) {
  return (
    <section className={["panel", className].filter(Boolean).join(" ")}>
      {(title || actions) && (
        <header className="panel__header">
          {title ? <h2 className="panel__title">{title}</h2> : <span />}
          {actions}
        </header>
      )}
      <div className={flush ? undefined : "panel__body"}>{children}</div>
    </section>
  );
}
