<script setup>
const colorMode = useColorMode();

const isDark = computed({
  get() {
    return colorMode.value === "dark";
  },
  set(_isDark) {
    colorMode.preference = _isDark ? "dark" : "light";
  },
});
</script>

<template>
  <ClientOnly v-if="!colorMode?.forced">
    <div class="w-8 h-8 flex items-center justify-center cursor-pointer">
      <UIcon
        class="w-8 h-8"
        :name="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
        @click="isDark = !isDark"
      />
    </div>

    <template #fallback>
      <div class="size-20" />
    </template>
  </ClientOnly>
</template>
