const { useState } = wp.element;

const SafiTooltip = ( { content } ) => {
    const [visible, setVisible] = useState( false );

    return (
        <div className="tooltip-container">
            <div
                className="tooltip-icon"
                onMouseEnter={() => setVisible( true )}
                onMouseLeave={() => setVisible( false )}
            >
                {/* Inline SVG for "i" icon */}
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="16" x2="12" y2="12" />
                    <line x1="12" y1="8" x2="12.01" y2="8" />
                </svg>
            </div>

            {visible && <div className="tooltip-box">{content}</div>}
        </div>
    );
};

export default SafiTooltip;
