rn-app/pages/HomeScreen/components/HighPrizeGame.tsx

/**
 * 高奖金游戏组件
 *
 * 深色主题特有，展示高奖金游戏，使用真实数据
 */

import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Animated,
  Image,
} from 'react-native';
import { createThemeStyles } from '@/theme';
import Colors from '@/constants/Colors';
import { mockHighPrizeGames } from '@/services/mockHomeService';
import type { HighPrizeGame as HighPrizeGameType } from '@/types/home';

/**
 * 创建主题样式
 */
const styles = createThemeStyles((colors) => ({
  container: {
    backgroundColor: colors.background,
    paddingVertical: 12,
    paddingHorizontal: 12,
    marginBottom: 12,
  },
  title: {
    fontSize: 15,
    fontWeight: 'bold',
    color: colors.text,
    marginBottom: 10,
  },
  scrollView: {
    paddingHorizontal: 0,
  },
  gameItem: {
    width: 110,
    height: 110,
    marginRight: 10,
    borderRadius: 12,
    backgroundColor: colors.card,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    elevation: 3,
    shadowColor: colors.cardShadow,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 4,
  },
  gameIcon: {
    fontSize: 44,
    marginBottom: 4,
  },
  gameName: {
    fontSize: 12,
    color: colors.text,
    textAlign: 'center',
    fontWeight: '500',
  },
  prizeTag: {
    position: 'absolute',
    top: 6,
    right: 6,
    backgroundColor: colors.error,
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderRadius: 4,
    elevation: 2,
    shadowColor: colors.cardShadow,
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  prizeText: {
    fontSize: 10,
    color: '#FFFFFF',
    fontWeight: 'bold',
  },
}));

interface HighPrizeGameProps {
  theme: 'light' | 'dark';
  games?: HighPrizeGameType[];
  onGamePress?: (game: HighPrizeGameType) => void;
}

/**
 * 高奖金游戏组件
 */
export default function HighPrizeGame({ theme, games: propGames, onGamePress }: HighPrizeGameProps) {
  const s = styles[theme];
  const [games, setGames] = useState<HighPrizeGameType[]>(propGames || []);
  const [selectedId, setSelectedId] = useState<string | null>(null);

  // 加载高奖金游戏数据
  useEffect(() => {
    if (propGames && propGames.length > 0) {
      setGames(propGames);
      return;
    }

    const loadGames = async () => {
      try {
        // const data = await getHighPrizeGames();
        // setGames(data.length > 0 ? data : mockHighPrizeGames);
      } catch (error) {
        console.error('加载高奖金游戏失败:', error);
        setGames(mockHighPrizeGames);
      }
    };
    loadGames();
  }, [propGames]);

  if (games.length === 0) {
    return null;
  }

  return (
    <View style={s.container}>
      <Text style={s.title}>🏆 实时爆奖</Text>
      <ScrollView
        style={s.scrollView}
        horizontal
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={16}
      >
        {games.map((game) => (
          <TouchableOpacity
            key={game.id}
            style={s.gameItem}
            onPress={() => {
              setSelectedId(game.id);
              onGamePress?.(game);
            }}
            activeOpacity={0.7}
          >
            {game.icon ? (
              <Image
                source={{ uri: game.icon }}
                style={{ width: '100%', height: '100%' }}
                resizeMode="cover"
              />
            ) : (
              <Text style={s.gameIcon}>🎰</Text>
            )}
            <Text style={s.gameName} numberOfLines={2}>
              {game.play_up_name}
            </Text>
            <View style={s.prizeTag}>
              <Text style={s.prizeText}>¥{Math.floor(game.payout_amount / 1000)}k</Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
}