import React from 'react';

interface ActionTooltipProps {
    label: string;
    description: string;
    children: React.ReactNode;
}

export default function ActionTooltip({ label, description, children }: ActionTooltipProps) {
    return (
        <div className="group relative flex flex-col items-center">
            {children}
            <div className="absolute top-full mt-2 w-48 p-3 bg-slate-900/90 backdrop-blur-sm text-white text-xs rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 text-center pointer-events-none transform translate-y-2 group-hover:translate-y-0">
                <div className="font-bold mb-1 text-indigo-300">{label}</div>
                <div className="text-slate-300 leading-tight break-keep">{description}</div>
                {/* Arrow */}
                <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-slate-900/90 rotate-45"></div>
            </div>
        </div>
    );
}