<script setup lang="ts">
const colorMode = useColorMode();

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

<template>
  <div
    class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
  >
    <h1 class="text-2xl sm:text-4xl font-bold">Simple QRCode</h1>

    <ClientOnly>
      <div class="flex gap-x-1 animate-fadeIn">
        <UButton
          color="neutral"
          variant="ghost"
          icon="i-bi-git"
          aria-label="Git repo"
          class="w-8 h-8"
          target="_blank"
          to="https://git.pihkaal.me/simple-qr"
        />

        <UButton
          :icon="
            isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'
          "
          color="neutral"
          variant="ghost"
          aria-label="Theme"
          class="w-8 h-8"
          @click="isDark = !isDark"
        />
      </div>
    </ClientOnly>
  </div>
</template>

<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn 200ms ease-in-out forwards;
}
</style>
