<template>
  <div class="flex items-center gap-3">
    <Tooltip text="Source Code">
      <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors">
        <i class="fab fa-github text-lg"></i>
      </a>
    </Tooltip>
    <Tooltip text="Discord Community">
      <a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-[#5865F2] dark:text-gray-400 dark:hover:text-[#5865F2] transition-colors">
        <i class="fab fa-discord text-lg"></i>
      </a>
    </Tooltip>
    <Tooltip text="Help">
      <button @click="$emit('open-help')" class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400 transition-colors">
        <i class="fas fa-question-circle text-lg"></i>
      </button>
    </Tooltip>
    <DarkModeToggle />
  </div>
</template>

<script setup lang="ts">
  import DarkModeToggle from '../../utilities/DarkModeToggle.vue';
  import Tooltip from '../../utilities/Tooltip.vue';

  defineEmits(['open-help']);
</script>
