// src/views/Community/components/EventCard/EventFollowButton.js
import React from 'react';
import { IconButton, Box } from '@chakra-ui/react';
import { AiFillStar, AiOutlineStar } from 'react-icons/ai';

/**
 * 事件关注按钮组件
 * @param {Object} props
 * @param {boolean} props.isFollowing - 是否已关注
 * @param {number} props.followerCount - 关注数
 * @param {Function} props.onToggle - 切换关注状态的回调函数
 * @param {string} props.size - 按钮尺寸（'xs' | 'sm' | 'md'，默认 'sm'）
 * @param {boolean} props.showCount - 是否显示关注数（默认 true）
 */
const EventFollowButton = ({
    isFollowing,
    followerCount = 0,
    onToggle,
    size = 'sm',
    showCount = true
}) => {
    const iconSize = size === 'xs' ? '16px' : size === 'sm' ? '18px' : '22px';

    const handleClick = (e) => {
        e.stopPropagation();
        onToggle?.();
    };

    return (
        <Box display="inline-flex" alignItems="center" gap={1}>
            <IconButton
                size={size}
                colorScheme="yellow"
                variant="ghost"
                bg="rgba(113, 128, 150, 0.6)"
                boxShadow="sm"
                _hover={{
                    bg: 'rgba(113, 128, 150, 0.8)',
                    boxShadow: 'md'
                }}
                icon={
                    isFollowing ? (
                        <AiFillStar
                            size={iconSize}
                            color="gold"
                        />
                    ) : (
                        <AiOutlineStar
                            size={iconSize}
                            color="gold"
                        />
                    )
                }
                onClick={handleClick}
                aria-label={isFollowing ? '取消关注' : '关注'}
            />
            {/* <Box fontSize="xs" color="gray.500">
                {followerCount || 0}
            </Box> */}
        </Box>
    );
};

export default EventFollowButton;