<script lang="ts">
	const currentYear: number = new Date().getFullYear();

	const footerLinks = [
		{
			img: '/logos/git.svg',
			link: 'https://git.fjla.uk/explore',
			alt: 'See my work on Gitea'
		}
	];
</script>

<footer>
	<p>
		&copy; Fred Boniface 2022-{currentYear}
	</p>
	<p>
		{#each footerLinks as link}
			<a href={link.link}>
				<img class="link-image" src={link.img} alt={link.alt} title={link.alt} /></a
			>
		{/each}
	</p>
	<div class="link-columns">
		<div class="link-column-left">
			TestLink1<br>
			TestLink2
		</div>
		<div class="link-column-right">
			<a href="https://git.fjla.uk/fred.boniface">Gitea</a><br>
			<a href="https://github.com/frdbonif">GitHub</a>
		</div>
	</div>
</footer>

<style>
	footer {
		margin-top: auto;
		width: 100%;
		background-color: transparent;
		height: auto;
	}
	footer p {
		padding: 0;
		padding-top: 5px;
		margin: auto;
		margin-top: 9px;
		text-align: center;
		font-family: monospace;
		color: var(--light-text-color);
	}

	.link-image {
		height: 20px;
	}

	.link-columns {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 80px;
	}
</style>
