<template>
    <div class="theme-switcher">
        <span>Change Theme</span>

        <button
            v-for="(value, key) in themes"
            :class="[`theme-${key}`, { active: theme === key }]"
            @click="setTheme(key)"
        />
    </div>
</template>

<script setup>
import { themes } from '@/libs/theme'
import useState from '@/composables/useState'

const { theme } = useState()

const setTheme = (value) => {
    theme.value = value
}
</script>

<style lang="scss">
.theme-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    button {
        background: var(--theme-bg);
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: none;
        cursor: pointer;

        &.active {
            border: 1px solid var(--theme-fg);
        }
    }
    &:hover {
        color: var(--theme-fg) !important;
    }
}
</style>
