<template>
  <IconButton
    :icon="isDark ? Sun : Moon"
    :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
    @click="toggleTheme"
    class="theme-toggle"
  />
</template>

<script setup>
import { useLocalStorage } from '@vueuse/core'
import { watch } from 'vue'
import { Sun, Moon } from 'lucide-vue-next'
import IconButton from './IconButton.client.vue'

const isDark = useLocalStorage('theme-dark', false)

const toggleTheme = () => {
  isDark.value = !isDark.value
}

// Apply theme change to document
watch(isDark, (newValue) => {
  if (process.client) {
    document.documentElement.setAttribute('data-theme', newValue ? 'dark' : 'light')
  }
}, { immediate: true })
</script>

<style scoped>
.theme-toggle {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(180deg);
}

/* Special glow effect for theme toggle */
.theme-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  z-index: -1;
}

.theme-toggle:hover::after {
  width: 80px;
  height: 80px;
  opacity: 0.3;
}
</style>