export function renderHeader({ title = '', centerNode = null, leftAction, leftLabel = '', rightActions = [] }) {
  const wrap = document.createElement('header');
  wrap.className = 'page-header app-topbar-shell';

  const left = document.createElement('div');
  left.className = 'header-left';
  if (leftAction) {
    const btn = document.createElement('button');
    btn.type = 'button';
    const rawLabel = String(leftAction.label || '').trim();
    const isBackAction = rawLabel === '←' || rawLabel === '<' || rawLabel === '‹';
    btn.className = `icon-btn${isBackAction ? ' header-back-btn' : ''}`;
    btn.textContent = isBackAction ? '←' : rawLabel;
    if (isBackAction) {
      btn.setAttribute('aria-label', leftAction.ariaLabel || 'Назад');
      btn.title = leftAction.title || 'Назад';
    }
    btn.addEventListener('click', leftAction.onClick);
    left.append(btn);
  }
  if (leftLabel) {
    const label = document.createElement('span');
    label.className = 'header-left-label';
    label.textContent = leftLabel;
    left.append(label);
  }

  const center = document.createElement('div');
  center.className = 'header-center';
  if (centerNode instanceof Node) {
    center.append(centerNode);
  } else {
    const h1 = document.createElement('h1');
    h1.className = 'page-title';
    h1.textContent = title;
    center.append(h1);
  }

  const right = document.createElement('div');
  right.className = 'header-actions';
  rightActions.forEach((action) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = `icon-btn${action.className ? ` ${action.className}` : ''}`;
    if (action.title) btn.title = action.title;
    if (action.ariaLabel) btn.setAttribute('aria-label', action.ariaLabel);
    if (action.iconNode instanceof Node) {
      btn.append(action.iconNode);
    } else {
      btn.textContent = action.label;
    }
    btn.addEventListener('click', action.onClick);
    right.append(btn);
  });

  wrap.append(left, center, right);
  return wrap;
}