// 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, TAB_SELECTED_STYLE } from '../../constants';

/**
 * Tab 导航组件
 *
 * @param {Object} props
 * @param {string} props.tabBg - Tab 列表背景色
 * @param {string} props.activeBg - 激活状态背景色
 */
const TabNavigation = ({ tabBg, activeBg }) => {
  return (
    <TabList p={4} bg={tabBg}>
      {COMPANY_TABS.map((tab, index) => (
        <Tab
          key={tab.key}
          _selected={{
            bg: activeBg,
            color: 'white',
            ...TAB_SELECTED_STYLE,
          }}
          mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
        >
          <HStack spacing={2}>
            <Icon as={tab.icon} />
            <Text>{tab.name}</Text>
          </HStack>
        </Tab>
      ))}
    </TabList>
  );
};

export default TabNavigation;