type PageHeaderProps = {
  title: string;
  onBack?: () => void;
  backLabel?: string;
  right?: React.ReactNode;
  /** 是否展示居中标题；H5 微信内默认隐藏，避免与系统标题栏重复 */
  showTitle?: boolean;
};

export default function PageHeader({
  title,
  onBack,
  backLabel = '←',
  right,
  showTitle = false,
}: PageHeaderProps) {
  return (
    <header className="page-header" aria-label={title}>
      <div className="page-header-side">
        {onBack ? (
          <button type="button" className="back-btn" onClick={onBack} aria-label="返回">
            {backLabel}
          </button>
        ) : (
          <span className="page-header-spacer" />
        )}
      </div>
      {showTitle ? (
        <div className="app-page-title page-header-title">{title}</div>
      ) : (
        <div className="page-header-title page-header-title--spacer" aria-hidden="true" />
      )}
      <div className="page-header-side page-header-side--right">{right ?? <span className="page-header-spacer" />}</div>
    </header>
  );
}