---
import { MENU_LINKS } from "@/data/constants";

const year = new Date().getFullYear();
---

<footer
	class="mt-auto flex w-full flex-col items-center justify-center gap-y-2 pt-20 pb-4 text-center align-top text-gray-500 sm:flex-row sm:justify-between sm:text-xs"
>
	<div class="mr-0 sm:mr-4">
		Copyright &copy; {year}
		<span aria-label="rocket emoji">🚀</span>
		Astro Cactus
	</div>
	<nav
		aria-label="More on this site"
		class="flex gap-x-2 sm:gap-x-0 sm:divide-x sm:divide-gray-500"
	>
		{
			MENU_LINKS.map((link) => (
				<a
					href={link.path}
					class="sm:hover:text-textColor px-4 py-2 sm:py-0 sm:px-2 sm:hover:underline"
				>
					{link.title}
				</a>
			))
		}
	</nav>
</footer>