import React, { ReactNode } from 'react';

interface TooltipProps {
    children: ReactNode;
    content: string;
    position?: 'top' | 'bottom' | 'left' | 'right';
    className?: string; // For extra styling on the wrapper
}

export const Tooltip: React.FC<TooltipProps> = ({ children, content, position = 'top', className = '' }) => {
    const positionClasses = {
        top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
        bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
        left: 'right-full top-1/2 -translate-y-1/2 mr-2',
        right: 'left-full top-1/2 -translate-y-1/2 ml-2',
    };

    return (
        <div className={`relative group ${className}`}>
            {children}
            <div
                className={`absolute ${positionClasses[position]} z-50 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out`}
            >
                <div className="bg-stone-900/95 backdrop-blur-sm text-white text-[10px] font-bold uppercase tracking-widest py-2 px-3 rounded-lg shadow-xl whitespace-nowrap border border-white/10">
                    {content}
                    {/* Arrow */}
                    {/* <div className="absolute w-2 h-2 bg-stone-900 rotate-45 ..."></div> Optional */}
                </div>
            </div>
        </div>
    );
};