<script lang="ts">
	// let location = window.location.pathname;
  let links = [
    { name: 'Home', url: '/' },
    { name: 'Search', url: '/search' },
    { name: 'About Me', url: 'https://me.hareworks.net/' },
  ];
</script>

<footer>
	<div class="banner">
		<a href="https://me.hareworks.net/" target="_blank">
			<img src="/img/logo.png" alt="HareWorks" width="100px" height="100px" />
		</a>
		<div class="copyright">
			<p>© 2024 Hare</p>
		</div>
	</div>
	<div class="separator"></div>
	<div class="panel">
		<ul>
      {#each links as link}
        <li><a href={link.url}>{link.name}</a></li>
      {/each}
			<li><p>Contact: hello at hareworks dot net</p></li>
		</ul>
	</div>
</footer>

<style lang="scss">
	footer {
		width: 100%;
		background-color: var(--background-primary);
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-direction: row;
		padding: 10px 10px;
		box-sizing: border-box;
		color: white;
	}
	.banner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		a {
			width: 100px;
			height: 100px;
			margin: 20px;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.separator {
		width: 1px;
		margin: 0 20px;
		background-color: var(--line-primary);
	}
	.panel {
		width: 300px;
		margin: 20px 0;
		display: flex;
		justify-content: space-between;
		align-items: top;
		flex-direction: row;
		gap: 20px;
	}
	ul {
		margin: 0;
	}
	li {
		list-style: none;
		> a,
		> p {
			color: lightgrey;
			text-decoration: none;
			padding: 2px;
			margin: 0;
			display: block;
			text-wrap: nowrap;
		}
    > p {
      padding-top: 15px;
    }
	}
</style>
