---
import { Image } from "astro:assets";
import { getRelativeLocaleUrl } from "astro:i18n";
import logo from "../assets/ci/icon-only.svg";

const isEnglish = Astro.currentLocale === "en";
---

<header>
    <a href="/" class="hoverable hoverable--diff">
        <span class="sr-only">Back to home</span>
        <Image
            class="icon"
            src={logo}
            loading="eager"
            alt="Tideshift Digital logo mark"
        />
    </a>

    <nav>
        <ul>
            <li>
                <a class="hoverable" href="/blog">Blog</a>
            </li>
            <li>
                <a class="hoverable" href="/imprint">Imprint</a>
            </li>
            <li>
                <a class="hoverable" href="/privacy">Privacy policy</a>
            </li>
            <!-- <li>
                <a
                    class:list={['hoverable', { active: isEnglish }]}
                    href={getRelativeLocaleUrl("en", "")}>EN</a
                >
            </li>
            <li>
                <a
                    class:list={['hoverable',{ active: !isEnglish }]}
                    href={getRelativeLocaleUrl("de", "")}>DE</a
                >
            </li> -->
        </ul>
    </nav>
</header>

<style>
    header {
        display: flex;
        justify-content: space-between;
    }

    .icon {
        width: 60px;
        height: auto;
    }

    ul {
        display: flex;
        list-style: none;
        gap: 1em;
    }

    ul {
        & a {
            color: var(--clr-ts-light);
            text-decoration: none;

            &.active {
                text-decoration: underline;
            }
        }
    }
</style>