/**
 * TabNavigation 通用导航组件
 *
 * 渲染 Tab 按钮列表，支持图标 + 文字
 */

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

const TabNavigation: React.FC<TabNavigationProps> = ({
  tabs,
  themeColors,
  borderRadius = 'lg',
}) => {
  return (
    <TabList
      bg={themeColors.bg}
      borderBottom="1px solid"
      borderColor={themeColors.dividerColor}
      borderTopLeftRadius={borderRadius}
      borderTopRightRadius={borderRadius}
      pl={0}
      pr={4}
      py={2}
      flexWrap="wrap"
      gap={2}
    >
      {tabs.map((tab) => (
        <Tab
          key={tab.key}
          color={themeColors.unselectedText}
          borderRadius="full"
          px={4}
          py={2}
          fontSize="sm"
          _selected={{
            bg: themeColors.selectedBg,
            color: themeColors.selectedText,
            fontWeight: 'bold',
          }}
          _hover={{
            bg: 'whiteAlpha.100',
          }}
        >
          <HStack spacing={2}>
            {tab.icon && <Icon as={tab.icon} boxSize={4} />}
            <Text>{tab.name}</Text>
          </HStack>
        </Tab>
      ))}
    </TabList>
  );
};

export default TabNavigation;