<script setup lang="ts">
import { computed } from "vue";
import { useSettingStore, type UiTheme } from "../store/modules/setting";

const setting = useSettingStore();

const theme = computed(() => setting.currentTheme());

const items: Array<{ value: UiTheme; label: string }> = [
    { value: "dark", label: "深色" },
    { value: "soft-light", label: "清淡" },
];

const onSelect = async (value: UiTheme) => {
    if (value === theme.value) {
        return;
    }
    await setting.onConfigChange("uiTheme", value);
};
</script>

<template>
    <div class="theme-switch" role="tablist" aria-label="Theme switcher">
        <button
            v-for="item in items"
            :key="item.value"
            type="button"
            class="theme-switch__item"
            :class="{ 'is-active': theme === item.value }"
            @click="onSelect(item.value)"
        >
            {{ item.label }}
        </button>
    </div>
</template>

<style scoped>
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--theme-switch-bg, rgba(15, 23, 42, 0.72));
    border: 1px solid var(--theme-switch-border, rgba(148, 163, 184, 0.18));
    box-shadow: var(--theme-switch-shadow, 0 12px 28px rgba(15, 23, 42, 0.18));
}

.theme-switch__item {
    min-width: 56px;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--theme-switch-text, rgba(226, 232, 240, 0.74));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.24s ease;
}

.theme-switch__item:hover {
    color: var(--theme-switch-text-hover, #ffffff);
}

.theme-switch__item.is-active {
    background: var(--theme-switch-active-bg, linear-gradient(135deg, #2563eb 0%, #60a5fa 100%));
    color: var(--theme-switch-active-text, #ffffff);
    box-shadow: var(--theme-switch-active-shadow, 0 10px 24px rgba(37, 99, 235, 0.28));
}
</style>
