// src/views/Community/components/EventCard/atoms/KeywordsCarousel.js
// Keywords标签组件（点击切换）
import React, { useState } from 'react';
import { Box, Text, Tooltip } from '@chakra-ui/react';
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';

/**
 * Keywords标签组件（点击切换下一个）
 * @param {Array} keywords - 关键词数组
 * @param {Function} onKeywordClick - 关键词点击回调
 */
const KeywordsCarousel = ({
    keywords = [],
    onKeywordClick
}) => {
    const [currentIndex, setCurrentIndex] = useState(0);

    // 如果没有keywords，不渲染
    if (!keywords || keywords.length === 0) {
        return null;
    }

    const currentKeyword = keywords[currentIndex];

    // 点击切换到下一个关键词
    const handleClick = (e) => {
        e.stopPropagation();

        // 切换到下一个
        const nextIndex = (currentIndex + 1) % keywords.length;
        setCurrentIndex(nextIndex);

        // 触发回调
        if (onKeywordClick) {
            onKeywordClick(keywords[nextIndex]);
        }
    };

    return (
        <Tooltip
            label={keywords.length > 1
                ? `点击切换下一个标签 (${currentIndex + 1}/${keywords.length})`
                : '事件标签'}
            placement="top"
            hasArrow
            bg="rgba(20, 20, 20, 0.95)"
            color={PROFESSIONAL_COLORS.gold[500]}
            fontSize="sm"
        >
            <Box
                position="absolute"
                right={4}
                top="50%"
                transform="translateY(-50%)"
                pointerEvents="auto"
                zIndex={1}
                cursor={keywords.length > 1 ? "pointer" : "default"}
                onClick={keywords.length > 1 ? handleClick : undefined}
                px={3}
                py={1.5}
                borderRadius="full"
                bg="transparent"
                transition="all 0.3s ease"
                _hover={keywords.length > 1 ? {
                    bg: 'rgba(255, 195, 0, 0.15)',
                    transform: 'translateY(-50%) scale(1.05)',
                } : {}}
            >
                <Text
                    color={PROFESSIONAL_COLORS.gold[500]}
                    fontSize="md"
                    fontWeight="bold"
                    letterSpacing="wide"
                    whiteSpace="nowrap"
                    textShadow="0 0 20px rgba(255, 195, 0, 0.3)"
                >
                    {typeof currentKeyword === 'string'
                        ? currentKeyword
                        : currentKeyword?.concept || '未知标签'}
                </Text>
            </Box>
        </Tooltip>
    );
};

export default KeywordsCarousel;