vf_react/src/views/Community/components/EventCard/atoms/EventStats.js

// src/views/Community/components/EventCard/EventStats.js
import React from 'react';
import { HStack, Text, Tooltip } from '@chakra-ui/react';
import { Eye, MessageCircle, Star } from 'lucide-react';

/**
 * 事件统计信息组件（浏览量、帖子数、关注数）
 * @param {Object} props
 * @param {number} props.viewCount - 浏览量
 * @param {number} props.postCount - 帖子数
 * @param {number} props.followerCount - 关注数
 * @param {string} props.size - 尺寸（'sm' | 'md'，默认 'sm'）
 * @param {number} props.spacing - 间距（默认 3）
 * @param {Object} props.display - 响应式显示控制（默认 { base: 'none', md: 'flex' }）
 * @param {string} props.mutedColor - 文字颜色（可选）
 */
const EventStats = ({
    viewCount = 0,
    postCount = 0,
    followerCount = 0,
    size = 'sm',
    spacing = 3,
    display = { base: 'none', md: 'flex' },
    mutedColor
}) => {
    const fontSize = size === 'sm' ? 'xs' : 'sm';
    const iconSize = size === 'sm' ? '12px' : '16px';

    return (
        <HStack spacing={spacing} display={display} color={mutedColor}>
            {/* 浏览量 */}
            <Tooltip label="浏览量" placement="top">
                <HStack spacing={1}>
                    <Eye size={iconSize === '12px' ? 12 : 16} />
                    <Text fontSize={fontSize}>{viewCount}</Text>
                </HStack>
            </Tooltip>

            {/* 帖子数 */}
            <Tooltip label="帖子数" placement="top">
                <HStack spacing={1}>
                    <MessageCircle size={iconSize === '12px' ? 12 : 16} />
                    <Text fontSize={fontSize}>{postCount}</Text>
                </HStack>
            </Tooltip>

            {/* 关注数 */}
            <Tooltip label="关注数" placement="top">
                <HStack spacing={1}>
                    <Star size={iconSize === '12px' ? 12 : 16} />
                    <Text fontSize={fontSize}>{followerCount}</Text>
                </HStack>
            </Tooltip>
        </HStack>
    );
};

export default EventStats;