<script lang="ts">
	import type { Header } from '$lib/types/data';

	let { links }: Header = $props();
</script>

<header>
	<nav>
		<ul>
			{#each links as { href, label }, i (i)}
				<li>
					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
					<a href={href}>{label}</a>
				</li>
			{/each}
		</ul>
	</nav>
</header>

<style>
    header {
        position: fixed;
				inset-inline: 0;
        bottom: 2rem;
        z-index: var(--z-index-header);

        width: fit-content;
        padding: 1rem;
				margin-inline: auto;

				border: 1px solid var(--color-header-border);
				border-radius: 0.5rem;

				font-size: 0.75rem;
				font-weight: bold;

        background-color: var(--color-header-background);
        backdrop-filter: blur(1rem);


        @media (min-width: 768px) {
						position: sticky;
            top: 0;
						bottom: unset;

            width: auto;
            padding: 1rem;

						border: unset;
            border-bottom: 1px solid var(--color-header-border);
						border-radius: unset;

						font-size: 1.125rem;
        }
    }

    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        margin: unset;
        padding: unset;
        list-style: none;

				@media (min-width: 768px) {
						gap: 2rem;
        }
    }

    li {
        display: contents;
    }

    a {
				padding: 0.5rem;
        color: var(--color-text-primary);
				text-decoration: none;
        transition: ease-in-out 0.2s;

        &:hover {
            color: var(--color-accent-primary);
        }
    }
</style>