import React from 'react';
import { View, Text } from '@tarojs/components';
import { useLoad } from '@tarojs/taro';
import { FaGamepad, FaUsers } from 'react-icons/fa';
import TabBarLayout from '../../components/layout/TabBarLayout';
import './index.scss';

export default function Index() {
  useLoad(() => {
    console.log('Page loaded.');
  });

  return (
    <TabBarLayout>
      <View className='index'>
        <View className='index__header'>
          <Text className='index__title'>游戏广场</Text>
          <View className='index__subtitle'>
            <FaGamepad size={16} color="#666" style={{ marginRight: '8px' }} />
            <Text>精选多种互动游戏</Text>
          </View>
        </View>
        
        <View className='index__game-list'>
          {/* 游戏列表内容 */}
          <View className='index__game-card'>
            <View className='index__game-icon'>
              <FaUsers size={24} color="#4F7FFE" />
            </View>
            <View className='index__game-info'>
              <Text className='index__game-title'>海龟汤</Text>
              <Text className='index__game-desc'>考验推理能力的解谜游戏</Text>
            </View>
          </View>
        </View>
      </View>
    </TabBarLayout>
  );
}
