import { useId } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * The legacy `.ssgs-tooltip` help icon, reachable by keyboard.
 *
 * @param {Object} props
 * @param {string} props.position Extra legacy position classes ('bottom', 'right', 'bottom left', …).
 * @param {string} props.text     Tooltip text.
 * @param {string} props.image    Tooltip image URL (legacy screenshots).
 */
const HelpTooltip = ( { position = '', text, image } ) => {
	const id = useId();

	return (
		<span className={ `ssgs-tooltip ${ position }`.trim() }>
			<i
				className="ssgs-help"
				tabIndex={ 0 }
				role="button"
				aria-label={ __( 'More information', 'stock-sync-with-google-sheet-for-woocommerce' ) }
				aria-describedby={ id }
			></i>
			<span id={ id } role="tooltip">
				{ image ? <img src={ image } alt="" /> : text }
			</span>
		</span>
	);
};

export default HelpTooltip;