import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import Icon from '@components/base/Icon'
import { ICONS } from '@constants/icons';
import './index.scss';

const tabs = [
  { pagePath: '/pages/game-plaza/index', text: '游戏', icon: ICONS.PLAZA },
  { pagePath: '/pages/game-room/index', text: '房间', icon: ICONS.ROOM },
  { pagePath: '/pages/game-history/index', text: '历史', icon: ICONS.HISTORY },
  { pagePath: '/pages/profile/index', text: '我的', icon: ICONS.PROFILE }
];

const CustomTabBar: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const handleClick = (index: number, url: string) => {
    setCurrent(index);
    Taro.switchTab({ url });
  };

  return (
    <View className='custom-tab-bar'>
      {tabs.map((tab, index) => (
        <View 
          key={index} 
          className={`tab-item ${current === index ? 'active' : ''}`}
          onClick={() => handleClick(index, tab.pagePath)}
        >
          <Icon 
            type={tab.icon} 
            size={24} 
            color={current === index ? '#1296db' : '#8a8a8a'} 
          />
          <Text className='tab-text'>{tab.text}</Text>
        </View>
      ))}
    </View>
  );
};

export default CustomTabBar; 