<template>
    <el-button
        link
        type="primary"
        :aria-label="isDark ? 'Use light theme' : 'Use dark theme'"
        @click="toggleDarkMode"
    >
        <el-icon :size="18">
            <Sunny v-if="isDark" />
            <Moon v-else />
        </el-icon>
    </el-button>
</template>

<script setup lang="ts">
import { Moon, Sunny } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { useColorSchemeStore } from '@/stores/colorScheme';

const colorSchemeStore = useColorSchemeStore();
const { isDark } = storeToRefs(colorSchemeStore);

const { toggleDarkMode } = colorSchemeStore;
</script>
