<script>
    import favicon from "$lib/assets/favicon.png";
    import { PUBLIC_API_URL } from "$env/static/public";
    import { goto } from "$app/navigation";

    const logout = async () => {
        await fetch(`${PUBLIC_API_URL}/user/logout`, {
            credentials: "include"
        });
        goto("/");
    };
</script>

<header>
    <a href="/dashboard" class="logo">
        <img src={favicon} alt="ChatRPG logo" width="32" height="32" />
        <span>ChatRPG</span>
    </a>
    <nav>
        <a href="/tokens" class="nav-link">Tokens</a>
        <a href="/game" class="nav-link">Games</a>
        <button class="nav-link logout" onclick={logout}>Log Out</button>
    </nav>
</header>

<style>
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2rem;
        height: 64px;
        border-bottom: 1px solid #1e1e28;
        position: sticky;
        top: 0;
        background: rgba(11, 11, 16, 0.85);
        backdrop-filter: blur(12px);
        z-index: 50;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #e5e5ea;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.5px;
    }

    nav {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.4rem 0.9rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #a1a1aa;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

    .nav-link:hover {
        background: #1a1a24;
        color: #e5e5ea;
    }

    .logout {
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
    }

    .logout:hover {
        background: #1a1a24;
        color: #e05555;
    }
</style>
