import React from 'react';
import { View, Image, Text } from '@tarojs/components';
import { FaCrown } from 'react-icons/fa';
import { Player } from '../../../interfaces';
import { PlayerStatus } from '../../../constants';
import './index.scss';

interface PlayerAvatarProps {
  player: Player;
  size?: 'large' | 'medium' | 'small';
  showStatus?: boolean;
  showName?: boolean;
  showTag?: boolean;
  onClick?: (player: Player) => void;
}

/**
 * 玩家头像组件，使用Font Awesome图标
 */
const PlayerAvatar: React.FC<PlayerAvatarProps> = ({
  player,
  size = 'medium',
  showStatus = true,
  showName = true,
  showTag = true,
  onClick,
}) => {
  const handleClick = () => {
    onClick && onClick(player);
  };

  return (
    <View className={`player-avatar player-avatar--${size}`} onClick={handleClick}>
      <View className='player-avatar__wrapper'>
        <Image 
          className='player-avatar__image' 
          src={player.avatarUrl}
          mode='aspectFill'
        />
        {showStatus && (
          <View 
            className={`player-avatar__status ${
              player.status === PlayerStatus.ONLINE 
                ? 'player-avatar__status--online' 
                : 'player-avatar__status--offline'
            }`}
          />
        )}
        {showTag && player.role === 'host' && (
          <View className='player-avatar__tag'>
            <FaCrown size={12} color="#fff" style={{ marginRight: '4px' }} />
            主持人
          </View>
        )}
      </View>
      {showName && (
        <Text className='player-avatar__name'>{player.nickName}</Text>
      )}
    </View>
  );
};

export default PlayerAvatar; 