<template>
    <div class="theme-switcher" @click="toggleTheme()">
        <FontAwesomeIcon class="fa-icon" icon="sun" v-if="uiStore.theme === 'dark'" />
        <FontAwesomeIcon class="fa-icon" icon="moon" v-else />
    </div>
</template>

<script setup lang="ts">
import { useUIStore } from "@/store";

const uiStore = useUIStore();

function toggleTheme() {
    const nextTheme = uiStore.theme === "light" ? "dark" : "light";
    uiStore.setTheme(nextTheme);
}
</script>

<style lang="scss">
.theme-switcher {
}
</style>
