// src/views/Community/components/EventCard/EventTimeline.js
import React from 'react';
import { Box, VStack, Text, useColorModeValue, Badge } from '@chakra-ui/react';
import dayjs from 'dayjs';

/**
 * 事件时间轴组件
 * @param {Object} props
 * @param {string} props.createdAt - 事件创建时间
 * @param {Object} props.timelineStyle - 时间轴样式配置
 * @param {string} props.borderColor - 竖线边框颜色
 * @param {string} props.minHeight - 竖线最小高度（例如：'40px' 或 '80px'）
 * @param {Object} props.importance - 重要性配置对象（包含 level, badgeBg, badgeColor 等）
 */
const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40px', importance }) => {
    return (
        <VStack spacing={0} align="center" minW="65px" position="relative">
            {/* 时间长方形卡片 - 更紧凑 */}
            <Box
                {...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
                borderWidth={timelineStyle.borderWidth}
                borderColor={timelineStyle.borderColor}
                borderRadius="md"
                px={1.5}
                py={1.5}
                minW="60px"
                textAlign="center"
                boxShadow={timelineStyle.boxShadow}
                transition="all 0.3s ease"
                position="relative"
            >
                {/* 重要性等级徽章 - 左上角 */}
                {importance && (
                    <Badge
                        position="absolute"
                        top="-6px"
                        left="-6px"
                        bg={importance.badgeBg}
                        color={importance.badgeColor}
                        fontSize="10px"
                        fontWeight="bold"
                        borderRadius="full"
                        px={1.5}
                        py={0.5}
                        boxShadow="md"
                        zIndex={2}
                    >
                        {importance.level}
                    </Badge>
                )}

                {/* 日期 MM-DD */}
                <Text
                    fontSize="10px"
                    fontWeight="bold"
                    color={timelineStyle.textColor}
                    lineHeight="1.2"
                >
                    {dayjs(createdAt).format('MM-DD')}
                </Text>
                {/* 时间 HH:mm */}
                <Text
                    fontSize="10px"
                    fontWeight="bold"
                    color={timelineStyle.textColor}
                    lineHeight="1.2"
                    mt={0.5}
                >
                    {dayjs(createdAt).format('HH:mm')}
                </Text>
            </Box>
            {/* 时间轴竖线 */}
            <Box
                w="2px"
                flex="1"
                bg={borderColor}
                minH={minHeight}
                mt={1}
            />
        </VStack>
    );
};

export default EventTimeline;