<script lang="ts">
    import { locale } from "svelte-i18n"
    import { navigations, currentLang } from "../../store"

    $: languages = []

    $: {
        if ($navigations?.length) {
            $navigations.forEach((nav) => {
                if (!languages.includes(nav.locale)) {
                    languages.push(nav.locale)
                }
            })
            languages = languages
        }
    }

    const setLanguage = (lang: string) => {
        $currentLang = lang
        locale.set(lang)
    }
</script>

<div class="language-chooser">
    {#each languages as lang}
        <div class="lang" class:active="{$currentLang === lang}" on:click="{() => setLanguage(lang)}">
            {lang}
        </div>
    {/each}
</div>
