<!-- Header.svelte -->
<script>
    export let isLoggedIn = false;
    export let showUserNav = true;
    export let showHome = true;
</script>  

<header>
    <nav>
        <div class="nav-left">
            {#if showHome}
                <a href="/">
                    <span class="brz9-icon-home"></span>
                </a>
            {:else}
                <span></span>
            {/if}
        </div>
        <div class="nav-right">
            {#if showUserNav}
                {#if isLoggedIn}
                    <a href="/profile">
                        <span class="brz9-icon-user"></span>
                    </a>
                    <a href="/logout">
                        <span class="brz9-icon-exit"></span>
                    </a>
                {:else}
                    <a href="/login">
                        <span class="brz9-icon-enter"></span>
                    </a>
                {/if}


            {:else}
                <span></span>
            {/if}

            
        </div>
    </nav>
</header>

<style>
    header nav {
        display: flex;
        justify-content: space-between;
        padding: 1em;
        font-size: 1.5rem;    
    }
    .nav-left, .nav-right {
        display: flex;
    }
    a {
    margin-right: 1em;
    text-decoration: none;
    color: inherit;
  }
</style>