---
import { Sprite } from 'astro-icon';

import { Link } from '.';
---

<div class="flex flex-1 justify-end">
	<Link
		id="up-link"
		class="transition-transform duration-500 ease-in-out hover:-translate-y-1 focus:-translate-y-1"
		href="#top"
	>
		<button
			aria-label="Back to top"
			class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
		>
			<Sprite name="ri:arrow-up-line" class="h-icon-small w-icon-small" />
		</button>
	</Link>

	<script>
		const button = document.getElementById('up-link');
		button?.addEventListener('click', (event) => {
			event.preventDefault();
			window.scrollTo({
				top: 0,
				left: 0,
				behavior: 'smooth',
			});
		});
	</script>
</div>
