import { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';

/**
 * 커스텀 툴팁 컴포넌트
 * 마우스 커서를 따라다니는 방식
 * @param {React.ReactNode} children - 툴팁을 표시할 요소
 * @param {string} text - 툴팁에 표시할 텍스트 (content prop과 호환)
 * @param {string} content - 툴팁에 표시할 텍스트 (text prop과 호환)
 */
const Tooltip = ({ children, text, content, className = "" }) => {
    const [isVisible, setIsVisible] = useState(false);
    const [position, setPosition] = useState({ bottom: 0, left: 0 });
    const triggerRef = useRef(null);

    // text 또는 content prop 사용
    const tooltipText = text || content;

    const handleMouseEnter = (e) => {
        // 마우스 커서 위치를 기준으로 툴팁 위치 설정 (커서 위로)
        setPosition({
            bottom: window.innerHeight - e.clientY + 10,
            left: e.clientX
        });
        setIsVisible(true);
    };

    const handleMouseMove = (e) => {
        // 마우스 이동 시 툴팁 위치 업데이트
        setPosition({
            bottom: window.innerHeight - e.clientY + 10,
            left: e.clientX
        });
    };

    return (
        <>
            <div 
                ref={triggerRef}
                className={`inline-flex items-center ${className}`}
                onMouseEnter={handleMouseEnter}
                onMouseMove={handleMouseMove}
                onMouseLeave={() => setIsVisible(false)}
            >
                {children}
            </div>
            {isVisible && tooltipText && ReactDOM.createPortal(
                <AnimatePresence>
                    <motion.div
                        initial={{ opacity: 0, y: 5, scale: 0.95 }}
                        animate={{ opacity: 1, y: 0, scale: 1 }}
                        exit={{ opacity: 0, y: 5, scale: 0.95 }}
                        transition={{ duration: 0.15 }}
                        style={{ 
                            bottom: position.bottom, 
                            left: position.left,
                        }}
                        className="fixed z-[9999] -translate-x-1/2 px-2.5 py-1.5 bg-gray-800 text-white text-xs font-medium rounded-lg shadow-xl pointer-events-none whitespace-nowrap"
                    >
                        {tooltipText}
                    </motion.div>
                </AnimatePresence>,
                document.body
            )}
        </>
    );
};

export default Tooltip;