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

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

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

const { config } = useConfig()

const setTheme = (value) => {
    if (!config.value) return
    config.value.theme = 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>
