import type { ReactNode } from "react";

// Terminal panel: a bordered, titled box — the basic building block of the dense
// booth layout. Title bar in amber, square corners, subtle layered surfaces.

export function Panel({
  title,
  right,
  children,
  className = "",
}: {
  title?: string;
  /** Optional right-aligned content in the title bar (e.g. a status dot). */
  right?: ReactNode;
  children: ReactNode;
  className?: string;
}) {
  return (
    <section
      className={`flex flex-col border border-term-border bg-term-panel rounded-term overflow-hidden ${className}`}
    >
      {title && (
        <header className="flex items-center justify-between px-3 py-1.5 bg-term-panel-2 border-b border-term-border">
          <h2 className="m-0 text-[0.6875rem] font-semibold uppercase tracking-wider text-term-amber">
            {title}
          </h2>
          {right}
        </header>
      )}
      <div className="flex-1 min-h-0 p-3">{children}</div>
    </section>
  );
}