vf_react/src/views/Community/components/EventCard/EventHeader.js

// src/views/Community/components/EventCard/EventHeader.js
import React from 'react';
import { Box, Text, Heading, Tooltip, HStack } from '@chakra-ui/react';
import EventImportanceBadge from './EventImportanceBadge';
import EventPriceDisplay from './EventPriceDisplay';

/**
 * 事件标题头部组件
 * @param {Object} props
 * @param {string} props.title - 事件标题
 * @param {string} props.importance - 重要性等级
 * @param {Function} props.onTitleClick - 标题点击事件
 * @param {string} props.linkColor - 链接颜色
 * @param {boolean} props.compact - 是否紧凑模式（默认 false）
 * @param {number|null} props.avgChange - 平均涨跌幅（紧凑模式下使用）
 * @param {string} props.size - 标题大小（'sm' | 'md' | 'lg'，默认 'md'）
 */
const EventHeader = ({
    title,
    importance,
    onTitleClick,
    linkColor,
    compact = false,
    avgChange = null,
    size = 'md'
}) => {
    const handleClick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onTitleClick?.(e);
    };

    // 紧凑模式：标题 + 标签内联
    if (compact) {
        return (
            <Box flex="1" minW="150px">
                <Text
                    fontSize={size}
                    fontWeight="bold"
                    color={linkColor}
                    lineHeight="1.4"
                    noOfLines={2}
                    display="inline"
                    _hover={{ textDecoration: 'underline', color: 'blue.500' }}
                    onClick={handleClick}
                    cursor="pointer"
                >
                    {title}
                </Text>
                {' '}
                {/* 重要性标签 - 内联 */}
                <EventImportanceBadge
                    importance={importance}
                    showTooltip={false}
                    size="xs"
                />
                {' '}
                {/* 价格标签 - 内联 */}
                {avgChange != null && (
                    <EventPriceDisplay
                        avgChange={avgChange}
                        compact={true}
                        inline={true}
                    />
                )}
            </Box>
        );
    }

    // 详细模式：标题 + 提示框的重要性标签
    return (
        <HStack spacing={2} flex="1" align="center">
            <Tooltip
                label="点击查看事件详情"
                placement="top"
                hasArrow
                openDelay={500}
            >
                <Heading
                    size={size}
                    color={linkColor}
                    _hover={{ textDecoration: 'underline', color: 'blue.500' }}
                    onClick={handleClick}
                    cursor="pointer"
                >
                    {title}
                </Heading>
            </Tooltip>

            <EventImportanceBadge
                importance={importance}
                showTooltip={true}
                showIcon={true}
                size="xs"
            />
        </HStack>
    );
};

export default EventHeader;