// src/views/Community/components/EventCard/EventDescription.js
import React, { useState } from 'react';
import { Box, Text, Button } from '@chakra-ui/react';

/**
 * 事件描述组件（支持展开/收起）
 * @param {Object} props
 * @param {string} props.description - 描述文本
 * @param {string} props.textColor - 文字颜色
 * @param {number} props.minLength - 触发展开/收起的最小长度（默认 120）
 * @param {number} props.noOfLines - 未展开时显示的行数（默认 3）
 */
const EventDescription = ({
    description,
    textColor,
    minLength = 120,
    noOfLines = 3
}) => {
    const [isExpanded, setIsExpanded] = useState(false);

    // 如果没有描述，不渲染
    if (!description) {
        return null;
    }

    const handleToggle = (e) => {
        e.stopPropagation();
        setIsExpanded(!isExpanded);
    };

    return (
        <Box>
            <Text
                color={textColor}
                fontSize="sm"
                lineHeight="tall"
                noOfLines={isExpanded ? undefined : noOfLines}
            >
                {description}
            </Text>
            {description.length > minLength && (
                <Button
                    variant="link"
                    size="xs"
                    colorScheme="blue"
                    onClick={handleToggle}
                    mt={1}
                >
                    {isExpanded ? '收起' : '...展开'}
                </Button>
            )}
        </Box>
    );
};

export default EventDescription;