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;
};

/**
 * Tab 页顶栏：仅在有右侧扩展内容时渲染。
 * 小程序 / H5 标题走系统导航栏，避免自定义顶栏造成顶部留白。
 */
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
  const metrics = useNavBarMetrics();

  if (!extra) {
    return null;
  }

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