import type { ReactNode } from 'react';

type TabMainHeaderProps = {
  title: string;
  extra?: ReactNode;
  className?: string;
};

export default function TabMainHeader({ title, extra, className = '' }: TabMainHeaderProps) {
  // H5：系统标题已展示；无右侧内容时整栏不渲染，避免顶部留白
  if (!extra) {
    return null;
  }

  return (
    <header className={`tab-main-header${className ? ` ${className}` : ''}`} aria-label={title}>
      {extra ? <div className="tab-main-header-extra">{extra}</div> : null}
    </header>
  );
}