import type { ReactNode } from 'react';
import { View, Text } from '@tarojs/components';
import { navBarStyle, tabNavContentStyle, useNavBarMetrics } from '../lib/nav-bar';

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

const isH5 = process.env.TARO_ENV === 'h5';

/** Tab 页顶栏：适配刘海屏 + 微信胶囊避让；H5 不展示标题（与微信系统标题重复） */
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
  const metrics = useNavBarMetrics();

  // H5：系统标题已展示；无右侧内容时整栏不渲染，避免顶部留白
  if (isH5 && !extra) {
    return null;
  }

  return (
    <View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
      {!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
      <View
        className="tab-main-header__content"
        style={tabNavContentStyle(metrics)}
      >
        {extra ? <View className="tab-main-header__extra">{extra}</View> : null}
      </View>
    </View>
  );
}