// src/views/Company/components/CompanyTabs/TabNavigation.js
// Tab 导航组件 - 动态渲染 Tab 按钮（黑金主题）

import React from 'react';
import {
  TabList,
  Tab,
  HStack,
  Icon,
  Text,
} from '@chakra-ui/react';

import { COMPANY_TABS } from '../../constants';

// 黑金主题颜色配置
const THEME_COLORS = {
  bg: '#1A202C',           // 背景纯黑
  selectedBg: '#C9A961',   // 选中项金色背景
  selectedText: '#FFFFFF', // 选中项白色文字
  unselectedText: '#999999', // 未选中项深灰色
};

/**
 * Tab 导航组件（黑金主题）
 */
const TabNavigation = () => {
  return (
    <TabList py={4} bg={THEME_COLORS.bg} borderTopLeftRadius="16px" borderTopRightRadius="16px">
      {COMPANY_TABS.map((tab, index) => (
        <Tab
          key={tab.key}
          color={THEME_COLORS.unselectedText}
          borderRadius="full"
          px={4}
          py={2}
          _selected={{
            bg: THEME_COLORS.selectedBg,
            color: THEME_COLORS.selectedText,
          }}
          _hover={{
            color: THEME_COLORS.selectedText,
          }}
          mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
        >
          <HStack spacing={2}>
            <Icon as={tab.icon} boxSize="18px" />
            <Text fontSize="15px">{tab.name}</Text>
          </HStack>
        </Tab>
      ))}
    </TabList>
  );
};

export default TabNavigation;