/**
 * Abschnitt mit optionalem Kopf (Titel, Beschreibung, Aktionen) und unterem Rand zur optischen Trennung.
 */
export default function DashboardSection({
  title,
  description,
  headerRight,
  children,
  className = '',
  bodyClassName = ''
}) {
  const showHeader = title || description || headerRight
  return (
    <section className={`dashboard-section ${className}`.trim()}>
      {showHeader && (
        <header className="dashboard-section__header">
          <div className="dashboard-section__headline">
            {title ? <h2 className="dashboard-section__title">{title}</h2> : null}
            {description ? (
              <p className="dashboard-section__description">{description}</p>
            ) : null}
          </div>
          {headerRight ? (
            <div className="dashboard-section__actions">{headerRight}</div>
          ) : null}
        </header>
      )}
      <div className={`dashboard-section__body ${bodyClassName}`.trim()}>{children}</div>
    </section>
  )
}