import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './HqTabBar.css';

export const HQ_TABS = [
  { pagePath: '/pages/dashboard/index', text: '管理中心', icon: 'dashboard' },
  { pagePath: '/pages/stores/index', text: '门店审核', icon: 'fact_check' },
  { pagePath: '/pages/settlement/index', text: '结算中心', icon: 'account_balance_wallet' },
  { pagePath: '/pages/tickets/index', text: '客服中心', icon: 'support_agent' },
] as const;

type HqTabBarProps = {
  selected: number;
};

/** 总部底栏（H5 需页面内显式渲染；Taro custom-tab-bar 在 H5 不自动挂载） */
export default function HqTabBar({ selected }: HqTabBarProps) {
  return (
    <View className="hq-tabbar">
      {HQ_TABS.map((tab, index) => {
        const active = selected === index;
        return (
          <View
            key={tab.pagePath}
            className={`hq-tabbar__item${active ? ' hq-tabbar__item--active' : ''}`}
            onClick={() => {
              if (!active) Taro.switchTab({ url: tab.pagePath });
            }}
          >
            <Text
              className={`material-symbols-outlined hq-tabbar__icon${active ? ' hq-tabbar__icon--active' : ''}`}
            >
              {tab.icon}
            </Text>
            <Text className="hq-tabbar__label">{tab.text}</Text>
          </View>
        );
      })}
    </View>
  );
}