import React, {useState, useEffect} from 'react';

interface ClickMeProps {
	windowSize: number;
	setTrigger: any;
	setBusy: any;
}

/**
 * @return {jsx} a presentation of me
 */
export default function ClickMe({windowSize, setTrigger, setBusy}: ClickMeProps) {
	const [buttonClass, setButtonClass] = useState('');

	useEffect(() => {
		if (window.innerWidth > 1200) {
			setButtonClass('btn-lg');
		} else {
			setButtonClass('');
		}
	}, [windowSize]);

	return (
		<div
			className='
				tile-child d-flex
				flex-column
				align-items-center
				justify-content-center'
			id='clickme'>
			<button
				type='button'
				onClick={() => {
					setTrigger(Math.random());
					setBusy(true);
				}}
				className={'d-inline btn btn-clickme ' + buttonClass}>
					Click me !
			</button>
		</div>
	);
};