import React from 'react';
// presently unused in captcha
type Props = {
	children: React.ReactElement;
	close: () => void;
	isVisible: boolean;
};

export const PopOver: React.FC< Props > = ( {
	children,
	close,
	isVisible,
}: Props ) => {
	const bgOnClick = ( evt: React.MouseEvent ) => {
		evt.preventDefault();
		close();
	};

	window.document.addEventListener( 'keydown', ( evt ) => {
		if ( evt.key === 'Escape' ) {
			close();
		}
	} );

	return (
		<div className="absolute inset-0 z-10 w-full">
			{ /* backdrop-blur-sm */ }
			{ isVisible && (
				<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
					<button
						className="relative flex justify-center items-center"
						onClick={ ( evt ) => bgOnClick( evt ) }
					>
						{ children }
					</button>
				</div>
			) }
		</div>
	);
};