<script lang="ts" setup>
const colorMode = useColorMode();
const { t } = useI18n();
const toggleColorMode = () => {
  colorMode.preference = colorMode.preference === "light" ? "dark" : "light";
};

const currentModeKey = computed(() => {
  return colorMode.preference === "light"
    ? "switchToDarkMode"
    : "switchToLightMode";
});
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <button
          class="flex size-10 items-center rounded-md p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
          type="button"
          :aria-label="t(currentModeKey)"
          @click="toggleColorMode"
        >
          <span>
            <SvgColorModeDarkIcon
              aria-hidden="true"
              focusable="false"
              class="hidden dark:block"
            />
            <SvgColorModeLightIcon
              aria-hidden="true"
              focusable="false"
              class="dark:hidden"
            />
          </span>
        </button>
      </TooltipTrigger>

      <TooltipContent>
        <p>
          {{ t(currentModeKey) }}
        </p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>
