<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'
		},
		{
			img: '/logos/pixelfed.svg',
			link: 'https://pixelfed.scot/@fbface',
			alt: 'See my photography on Pixelfed'
		},
		{
			img: '/logos/flickr.svg',
			link: 'https://www.flickr.com/photos/fboniface/',
			alt: "Find me on Flickr"
		},
		{
			img: '/logos/mastodon.svg',
			link: 'https://mastodon.social/@fb@ibe.social',
			alt: 'Find me on Mastodon'
		},
		{
			img: '/logos/firefish.svg',
			link: 'https://ibe.social/@fb',
			alt: 'Find me on Firefish'
		}
	];
</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: 27px;
		margin: 5px;
	}

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