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

interface GitProps {
	windowSize: number;
}

/**
 * @return {jsx} a presentation of me
 */
export default function Git({windowSize}: GitProps) {
	const [topClass, setTopClass] = useState('');
	const [bottomClass, setBottomClass] = useState('');

	useEffect(() => {
		if (window.innerWidth > 1200) {
			setTopClass('btn-lg mb-3');
			setBottomClass('btn-lg mt-3');
		} else {
			setTopClass('mb-1');
			setBottomClass('mt-1');
		}
	}, [windowSize]);

	return (
		<div
			className='
				tile-child d-flex
				flex-column
				align-items-center
				justify-content-center'
			id='git'>
			<a
				href='https://git.gaetanbrochard.dev/gbrochar/expo-web'
				className={'d-inline btn btn-mine ' + topClass}>
					This project&apos;s git
			</a>
			<br />
			<a
				href='https://git.gaetanbrochard.dev/gbrochar'
				className={'d-inline btn btn-mine ' + bottomClass}>
					My git
			</a>
		</div>
	);
};