<script lang="ts">
	import '../app.css';
	import '@fortawesome/fontawesome-free/css/all.min.css';
	import { email } from '$lib';

	let { children } = $props();
</script>

<div class="flex h-dvh w-full flex-col">
	<header class="bg-srcery-gray-700 px-6 py-3 text-lg">
		<div class="mx-auto flex max-w-screen-lg flex-row justify-between">
			<span>
				<a href="/" class="hover:text-srcery-blue-500 duration-200 hover:underline">
					Rokas Puzonas
				</a>
			</span>
		</div>
	</header>

	<div class="w-full flex-grow px-6">
		<main class="mx-auto max-w-screen-lg">
			{@render children()}
		</main>
	</div>

	<footer class="bg-srcery-gray-600 w-full px-6 py-3">
		<div class="flex flex-col justify-center md:flex-row md:gap-8">
			<span>
				<a href="mailto:{email}">
					<i class="fa-regular fa-envelope"></i>
					<span class="text-srcery-blue-500 underline underline-offset-2">{email}</span>
				</a>
			</span>
			<span>
				<a href="https://git.rpuzonas.com/rpuzonas/">
					<i class="fa-brands fa-square-git"></i>
					<span class="text-srcery-blue-500 underline underline-offset-2"
						>@RokasPuzonas</span
					>
				</a>
			</span>
			<span>
				<a href="https://www.linkedin.com/in/rokas-puzonas-a60842243/">
					<i class="fa-brands fa-linkedin"></i>
					<span class="text-srcery-blue-500 underline underline-offset-2"
						>Rokas Puzonas</span
					>
				</a>
			</span>
		</div>
	</footer>
</div>
