import type { PropsWithChildren } from "react";

export interface PanelProps extends PropsWithChildren {
  title?: string;
  density?: "compact" | "dense";
}

export function Panel({ title, density = "dense", children }: PanelProps) {
  return (
    <section className="panel" data-density={density}>
      {title ? (
        <header className="panel__header">
          <h2>{title}</h2>
        </header>
      ) : null}
      <div className="panel__body">{children}</div>
    </section>
  );
}