<template>
  <button @click="settingsStore.toggleDarkMode()" class="p-2 rounded-lg transition-colors" :class="settingsStore.darkMode ? 'text-yellow-400 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'" aria-label="Toggle dark mode" data-rybbit-event="toggle-dark-mode">
    <i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
  </button>
</template>

<script setup lang="ts">
  import { useSettingsStore } from '@/stores/useSettingsStore';

  const settingsStore = useSettingsStore();
</script>
