---
import Icon from '@components/icons/Icon.astro';
import Logo from '@components/logos/Logo.astro';
import configConst from '@config';
import type { HTMLAttributes } from 'astro/types';
import Link from './Link.astro';

interface Props extends HTMLAttributes<'footer'> {}

const props = Astro.props;
---

<footer {...props} class="section flex justify-center items-center bg-blue-100 -mt-40 pt-20 pb-8 px-20">
	<div class="max-w-[1024px] w-full flex flex-col gap-y-24">
		<div class="flex flex-col gap-y-20 justify-center items-start md:flex-row md:items-start md:justify-between">
			<div class="flex-1 flex flex-col gap-y-3 text-blue-gray">
				<Logo logo="polyfrost.full" />
				<p>English (US)</p> {/* hardcoded for now, todo i18n */}
				<div class="flex flex-row gap-3">
					<a href={configConst.socials.discord} target="_blank" class="hover:text-[#5865F2]"><Icon icon="discord" /></a>
					<a href={configConst.socials.youtube} target="_blank" class="hover:text-[#ff0000]"><Icon icon="youtube" /></a>
					<a href={configConst.socials.github} target="_blank" class="hover:text-[#000000]"><Icon icon="github" /></a>
				</div>
			</div>

			<div class="flex-1 flex flex-col md:flex-row justify-end gap-8">
				{configConst.footer.map(column => (
					<div class="flex flex-col gap-y-3">
						<h3 class="text-gray-700 text-md">{column.header}</h3>
						<ul class="flex flex-col gap-y-1">
							{column.links.map(link => (
								<li>
									<Link href={link.url} class="text-blue-gray text-sm text-nowrap">{link.text}</Link>
								</li>
							))}
						</ul>
					</div>
				))}
			</div>
		</div>

		<div class="flex flex-col items-center md:flex-row md:items-start md:justify-between">
			<p class="text-blue-gray text-sm">© {new Date().getFullYear()} Polyfrost. All rights reserved.</p>
			<p class="text-blue-gray text-sm">Not an official Minecraft product. Not approved by or affiliated with Mojang Studios.</p>
		</div>
	</div>
</footer>