<script lang="ts">
    import { getLocale, setLocale } from "$lib/paraglide/runtime";

    interface Props {
        inline?: boolean;
    }

    let { inline = false }: Props = $props();

    function getOtherLocale(): string {
        const current = getLocale();
        return current === "et" ? "en" : "et";
    }

    function switchLanguage() {
        const newLocale = getOtherLocale();
        setLocale(newLocale as "et" | "en");
    }

    $effect(() => {
        getLocale();
    });
</script>

<button
    onclick={switchLanguage}
    class="{inline
        ? ''
        : 'fixed top-4 right-4 z-[100]'} bg-transparent border-none p-1 cursor-pointer transition-transform duration-200 hover:scale-110"
    aria-label="Switch language"
    title="Switch to {getOtherLocale() === 'en' ? 'English' : 'Eesti'}"
>
    <img
        src="/icons/{getOtherLocale()}.svg"
        alt={getOtherLocale() === "en" ? "English" : "Eesti"}
        class="block w-8 h-5 object-cover"
    />
</button>
