import React from 'react'

/**
 * Единый заголовок страницы в стиле Tabler UI.
 * Используется на всех страницах для одинакового UX.
 * Кнопки (actions) отображаются под названием страницы.
 * @param {string} title - Заголовок страницы
 * @param {React.ReactNode} [icon] - Иконка слева от заголовка (например, <IconServer />)
 * @param {string} [pretitle] - Небольшая надпись над заголовком (page-pretitle)
 * @param {React.ReactNode} [meta] - Подзаголовок или мета-информация под заголовком
 * @param {React.ReactNode} [actions] - Кнопки/действия под названием страницы (btn-list, btn-group)
 */
function PageHeader({ title, icon, pretitle, actions, meta }) {
  return (
    <div className="page-header d-print-none mb-4">
      <div className="row align-items-center">
        <div className="col">
          {pretitle && (
            <div className="page-pretitle">{pretitle}</div>
          )}
          <h1 className="page-title d-flex align-items-center">
            {icon && <span className="me-2 d-flex align-items-center">{icon}</span>}
            {title}
          </h1>
          {meta && (
            <div className="text-muted small mt-1">{meta}</div>
          )}
        </div>
      </div>
      {actions && (
        <div className="row mt-2">
          <div className="col d-print-none">
            {actions}
          </div>
        </div>
      )}
    </div>
  )
}

export default PageHeader