<template>
  <button
    @click="settingsStore.toggleDarkMode()"
    class="relative p-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group"
    :class="settingsStore.darkMode ? 'bg-indigo-600 text-yellow-300' : 'bg-blue-500 text-white'"
    aria-label="Toggle dark mode"
    data-rybbit-event="toggle-dark-mode"
  >
    <div class="relative w-6 h-6 flex items-center justify-center">
      <i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'" class="text-xl transition-all duration-300 group-hover:scale-110"></i>
    </div>
  </button>
</template>

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

  const settingsStore = useSettingsStore();
</script>
