<template>
  <button class="theme-toggle" @click="toggleTheme" :aria-label="TEXTS.THEME.TOGGLE_LABEL">
    <span class="theme-icon">{{ themeIsDark ? '🌞' : '🌙' }}</span>
  </button>
</template>

<script setup lang="ts">
import { TEXTS } from '../config/content';
import { computed } from 'vue';

const { $theme } = useNuxtApp();

const themeIsDark = computed(() => $theme.isDark);

const toggleTheme = () => {
  $theme.toggleTheme();
};
</script>

<style scoped>
@import '~/assets/css/components/theme-toggle.css';
</style>