<template>
  <button
    @click="toggleDark"
    class="w-10 h-5 bg-gray-300 rounded-full flex items-center justify-between px-1 transition duration-300 relative focus:outline-none"
  >
    <!-- 左側圖示 ☀️ -->
    <SunIcon
      :class="[
        'w-3 h-3 transition-opacity duration-300',
        isDark ? 'opacity-0' : 'opacity-100'
      ]"
    />

    <!-- 滑動圓球 -->
    <div
      class="w-4 h-4 bg-[#393939] rounded-full absolute top-0.5 transition-transform duration-300"
      :class="isDark ? 'translate-x-0' : 'translate-x-4'"
    ></div>

    <!-- 右側圖示 🌙 -->
    <MoonIcon
      :class="[
        'w-3 h-3 transition-opacity duration-300',
        isDark ? 'opacity-100' : 'opacity-0'
      ]"
    />
  </button>
</template>

<script setup>
import { SunIcon, MoonIcon} from '@heroicons/vue/24/solid'
import { useDarkMode } from '@/global/useDarkMode'

const { isDark, toggleDark } = useDarkMode()
</script>
  