/**
 * 移动端标签导航组件
 * 使用 Ant Design Tabs 组件实现一级分类导航
 * 二级分区通过内容区的列表展示
 */
import React from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { settingsConfig } from './config';
import { LAYOUT_DIMENSIONS } from './constants';
import type { NavigationState } from './types';

interface SettingsTabsProps {
  /** 当前导航状态 */
  navigation: NavigationState;
  /** 分类切换回调 */
  onCategoryChange: (categoryId: string) => void;
}

/**
 * 移动端标签导航
 * Layout: Fixed Header Tabs (固定顶部标签)
 * Component: Tabs (Ant Design)
 */
const SettingsTabs: React.FC<SettingsTabsProps> = ({
  navigation,
  onCategoryChange,
}) => {
  // 构建标签项
  const tabItems: TabsProps['items'] = settingsConfig.map((category) => ({
    key: category.id,
    label: (
      <span>
        {category.icon}
        <span style={{ marginLeft: 8 }}>{category.title}</span>
      </span>
    ),
  }));

  // 处理标签切换
  const handleTabChange = (activeKey: string) => {
    onCategoryChange(activeKey);
  };

  return (
    <div
      style={{
        width: '100%',
        height: LAYOUT_DIMENSIONS.MOBILE_TABS_HEIGHT,
        borderBottom: '1px solid #f0f0f0',
      }}
    >
      <Tabs
        activeKey={navigation.activeCategory}
        items={tabItems}
        onChange={handleTabChange}
        centered
        size="small"
        style={{
          height: '100%',
        }}
      />
    </div>
  );
};

export default SettingsTabs;