import type { ReactNode, HTMLAttributes } from "react";

export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  bodyClassName?: string;
}

export function Panel({
  children,
  header,
  footer,
  bodyClassName,
  className,
  ...props
}: PanelProps) {
  return (
    <div
      className={["panel", className].filter(Boolean).join(" ")}
      {...props}
    >
      {header && (
        <div className="panel-header">
          {header}
        </div>
      )}
      <div className={["panel-body", bodyClassName].filter(Boolean).join(" ")}>
        {children}
      </div>
      {footer && (
        <div className="panel-footer">
          {footer}
        </div>
      )}
    </div>
  );
}
