<template>
  <button
    @click="toggleTheme"
    class="relative w-10 h-10 rounded-full bg-card hover:bg-block-hover text-secondary hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg border border-opacity-20 border-primary-500 hover:border-opacity-40 group"
    :title="theme === 'dark' ? '切换到浅色主题' : '切换到深色主题'"
  >
    <!-- 图标容器 -->
    <div class="absolute inset-0 flex items-center justify-center">
      <!-- 太阳图标 (浅色模式) -->
      <FontAwesomeIcon 
        :icon="['fas', 'sun']" 
        :class="[
          'w-5 h-5 transition-all duration-300 transform',
          theme === 'dark' 
            ? 'opacity-100 scale-100 rotate-0' 
            : 'opacity-0 scale-50 rotate-180'
        ]"
      />
      
      <!-- 月亮图标 (深色模式) -->
      <FontAwesomeIcon 
        :icon="['fas', 'moon']" 
        :class="[
          'w-5 h-5 transition-all duration-300 transform absolute',
          theme === 'dark' 
            ? 'opacity-0 scale-50 -rotate-180' 
            : 'opacity-100 scale-100 rotate-0'
        ]"
      />
    </div>
    
    <!-- 悬停时的光晕效果 -->
    <div class="absolute inset-0 rounded-full bg-primary-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
  </button>
</template>

<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'

const { theme, toggleTheme } = useTheme()
</script>

<style scoped>
/* 确保图标切换动画流畅 */
.fa-sun,
.fa-moon {
  color: rgb(var(--color-text-secondary));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 悬停时图标颜色变化 */
button:hover .fa-sun,
button:hover .fa-moon {
  color: rgb(var(--color-primary));
}

/* 为浅色主题的太阳图标添加特殊效果 */
[data-theme='light'] .fa-sun {
  color: rgb(var(--color-warning));
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
}

/* 为深色主题的月亮图标添加特殊效果 */
[data-theme='dark'] .fa-moon {
  color: rgb(var(--color-primary-light));
  filter: drop-shadow(0 0 4px rgba(129, 140, 248, 0.3));
}
</style> 