<script setup lang="ts">
defineOptions({
  inheritAttrs: false,
})
const colorMode = useColorMode()

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

<template>
  <ClientOnly v-if="!colorMode?.forced">
    <UiButton
      :icon="isDark ? 'i-ph:moon-duotone' : 'i-ph:sun-dim-duotone'"
      variant="ghost"
      size="icon"
      v-bind="{
        ...$attrs,
      }"
      :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
      @click="toggleDark"
    />

    <template #fallback>
      <Skeleton class="w-8 h-8" />
    </template>
  </ClientOnly>
</template>
