import { getConfig } from "../lib/config";

/**
 * Table title and description (Table fields › Table behaviour) for inline
 * tables and the overlay. The table draws it in its empty top-left corner;
 * cards and the empty/loading states show it above. Null when both are
 * empty. `id`/`title` let the overlay label its dialog with it; `title` and
 * `description` replace the settings (the quick table has its own title).
 */
export function TableHeading({ id, title: override, description: text } = {}) {
  const description = text ?? getConfig().table.description;
  const title = override ?? getConfig().table.title;

  if (!title && !description) {
    return null;
  }

  return (
    <div className="pcfw-table__heading">
      {title && (
        <h2 id={id} className="pcfw-table__title">
          {title}
        </h2>
      )}
      {description && <p className="pcfw-table__description">{description}</p>}
    </div>
  );
}