<template>
  <ClientOnly v-if="!colorMode?.forced">
    <div class="flex h-8 w-8 cursor-pointer items-center justify-center">
      <i
        :class="[
          'uil text-[32px] cursor-pointer',
          isDark ? 'uil-moon' : 'uil-sun',
        ]"
        @click="isDark = !isDark"
      />
    </div>
    <template #fallback>
      <div class="size-20" />
    </template>
  </ClientOnly>
</template>

<script setup>
const colorMode = useColorMode()

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