<script lang="ts">
    import { metricCall } from "./config"
    import { location } from "./lib/store"
    export let url = ""

    if (url) {
        // ssr
        let l = url.split("?")
        $location = {
            path: l[0],
            search: l.length > 1 ? l[1] : "",
            hash: "",
            push: false,
            pop: false,
        }
    }

    // metrics
    let oldPath = $state("")
    $effect(() => {
        if (metricCall && typeof window !== "undefined" && oldPath !== $location.path) {
            const ref = oldPath
                ? document.location.protocol + "//" + document.location.host + oldPath
                : document.referrer
            oldPath = $location.path
            const fetchPath = oldPath + (oldPath.includes("?") ? "&" : "?") + "metrics"
            fetch(fetchPath, {
                headers: {
                    "x-ssr-skip": "204",
                    "x-ssr-ref": ref,
                    "x-ssr-res": `${window.innerWidth}x${window.innerHeight}`,
                    // no cache
                    "cache-control": "no-cache, no-store, must-revalidate",
                },
            })
        }
    })
</script>

<header class="text-white p-4 bg-red-900">
    <div class="container mx-auto flex justify-between items-center">
        <a href="/" class="text-xl font-bold">Tibi Svelte Starter</a>
        <nav>
            <ul class="flex space-x-4">
                <li><a href="/" class="hover:underline">Home</a></li>
                <li><a href="/about" class="hover:underline">About</a></li>
                <li><a href="/contact" class="hover:underline">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>
