<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="flex h-8 w-8 cursor-pointer items-center justify-center">
      <img
        class="h-8 w-8"
        :src="`/icons/${isDark ? 'Moon' : 'Light'}.svg`"
        @click="isDark = !isDark"
      />
    </div>

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