/** Panel — a bordered surface/card, optionally with a header (LD). */

import { cn } from "../lib/cn";

export interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  /** Optional header title. */
  title?: React.ReactNode;
  /** Optional content rendered on the right of the header (actions). */
  actions?: React.ReactNode;
  /** Remove the default body padding (e.g. to host a flush list/terminal). */
  flush?: boolean;
}

/** A raised surface used to group related content. */
export function Panel({ title, actions, flush, className, children, ...rest }: PanelProps) {
  const hasHeader = title != null || actions != null;
  return (
    <section
      className={cn("rounded-lg border border-border bg-surface", className)}
      {...rest}
    >
      {hasHeader && (
        <header className="flex items-center justify-between gap-2 border-b border-border px-4 py-2.5">
          {typeof title === "string" ? (
            <h3 className="text-sm font-semibold text-content">{title}</h3>
          ) : (
            title
          )}
          {actions}
        </header>
      )}
      <div className={cn(!flush && "p-4")}>{children}</div>
    </section>
  );
}
