<script lang="ts">
	import type { Header } from '$lib/types/data';
	import favicon from '$lib/assets/favicon.svg';
	import { Menu, X } from '@lucide/svelte';

	let { links }: Header = $props();

	let isMobileMenuOpen = $state(false);

	const setIsMobileMenuOpen = (value: boolean) => {
		isMobileMenuOpen = value;
	};
</script>

<header>

	<nav class:mobile-open={isMobileMenuOpen}>
		<div>
			<span class="icon">
				<img src={favicon} alt="">
			</span>

			<!-- open menu -->
			<button class:hide={isMobileMenuOpen} onclick={() => setIsMobileMenuOpen(true)}>
				<span class="icon">
					<Menu class="icon" />
				</span>
			</button>

			<!-- close menu -->
			<button class:hide={!isMobileMenuOpen} onclick={() => setIsMobileMenuOpen(false)}>
				<span class="icon">
					<X class="icon" />
				</span>
			</button>
		</div>

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

<style>
    header {
        position: sticky;
        top: 0;
        bottom: unset;
        inset-inline: 0;
        z-index: var(--z-index-header);

        width: auto;
        padding: 1rem;

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

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

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

    div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 2rem;
        padding-inline: 0.5rem;

        @media (min-width: 768px) {
            display: none;
        }
    }

    button {
        border: unset;
        background: unset;
        color: inherit;
        font-size: inherit;
        cursor: pointer;
    }

    .hide {
        display: none;
    }

    ul {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 0.5rem;

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

        @media (min-width: 768px) {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 2rem;
        }
    }

    nav.mobile-open ul {
        display: flex;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--color-header-border);

        @media (min-width: 768px) {
            margin-top: unset;
            padding-top: unset;
            border-top: unset;
        }
    }

    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-header-hover);
        }
    }
</style>