import React from 'react';
import { View, Image, Text } from '@tarojs/components';
import { Game } from '../../../interfaces';
import './index.scss';

interface GameCardProps {
  game: Game;
  onClick?: (game: Game) => void;
}

/**
 * 游戏卡片组件
 */
const GameCard: React.FC<GameCardProps> = ({ game, onClick }) => {
  const handleClick = () => {
    onClick && onClick(game);
  };

  return (
    <View className='game-card' onClick={handleClick}>
      <View className='game-card__cover'>
        <Image
          className='game-card__image'
          src={game.coverImage || 'https://placeholder.com/300x200'}
          mode='aspectFill'
        />
        {game.playCount > 0 && (
          <View className='game-card__play-count'>
            <Text>{`${game.playCount}人在玩`}</Text>
          </View>
        )}
      </View>
      <View className='game-card__content'>
        <View className='game-card__title'>{game.gameName}</View>
        <View className='game-card__info'>
          <View className='game-card__rating'>
            {Array(5).fill(0).map((_, index) => (
              <Text
                key={index}
                className={`game-card__star ${index < Math.floor(game.rating) ? 'game-card__star--active' : ''}`}
              >
                ★
              </Text>
            ))}
            <Text className='game-card__rating-text'>{game.rating.toFixed(1)}</Text>
          </View>
          <View className='game-card__time'>{game.timeEstimate}</View>
        </View>
      </View>
    </View>
  );
};

export default GameCard; 