<script lang="ts">
    import type { GameTab } from "../types";

    export let setTab: (tab: GameTab) => void;
</script>

<nav>
    <button
        class="invisible"
        on:click={ () => setTab('village') }
    >
        <img src="/img/icons/village.svg" alt="">
        <span>Village</span>
    </button>
    <button
        class="invisible"
        on:click={ () => setTab('resources') }
    >
        <img src="/img/icons/field.svg" alt="">
        <span>Resources</span>
    </button>
    <button
        class="invisible"
        on:click={ () => setTab('world') }
    >
        <img src="/img/icons/world.svg" alt="">
        <span>Worldmap</span>
    </button>
</nav>

<style>
    nav {
        display: flex;
        gap: 2em;
        justify-content: center;
        margin-bottom: 4em;
    }

    nav button {
        aspect-ratio: 1;
        border: 0.4em solid grey;
        border-radius: 100%;
        cursor: pointer;
        height: 4em;
        position: relative;
    }

    nav button img {
        height: 4em;
        width: 4em;
    }

    nav button span {
        background-color: black;
        border-radius: 1em;
        bottom: 0;
        padding: 0.5em 1em;
        position: absolute;
        left: 50%;
        translate: -50% 100%;
    }
</style>
