<template>
    <button
        type="button"
        class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 hover:border-slate-300"
        @click="toggleTheme"
    >
        {{ isDark ? 'Dark' : 'Light' }}
    </button>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const isDark = ref(false);

const applyTheme = () => {
    document.documentElement.classList.toggle('dark', isDark.value);
    localStorage.setItem('aurora-theme', isDark.value ? 'dark' : 'light');
};

const toggleTheme = () => {
    isDark.value = !isDark.value;
    applyTheme();
};

onMounted(() => {
    const stored = localStorage.getItem('aurora-theme');
    isDark.value = stored === 'dark';
    applyTheme();
});
</script>
