import React from 'react';
import './NavBar.css';

/* 顶部导航栏（移动端）— 规格 §1；返回与操作热区 ≥ 44×44，顶部内边距含安全区 */
export default function NavBar({
  title = '',
  titleAlign = 'center',
  elevated = false,
  backText = '‹',
  onBack,
  actions = null,
}) {
  return (
    <header
      className={`kole-m-navbar kole-m-navbar--${titleAlign}` + (elevated ? ' is-elevated' : '')}
      role="banner"
    >
      <button
        className="kole-m-navbar__back"
        type="button"
        aria-label="返回"
        onClick={onBack}
      >
        {backText}
      </button>
      <h2 className="kole-m-navbar__title">{title}</h2>
      <div className="kole-m-navbar__actions">{actions}</div>
    </header>
  );
}