<template>
  <header class="flex items-center justify-between bg-gray-800 p-3 shadow-md sticky top-0 z-40">
    <!-- Breadcrumb navigation -->
    <div class="flex items-center gap-2">
      <span class="text-gray-200">Spritesheet editor</span>
    </div>

    <!-- Right side actions -->
    <div class="flex gap-3 items-center">
      <!-- Zoom display -->
      <div class="text-sm text-gray-400 mr-2">
        <span>Zoom: {{ Math.round(zoomLevel * 100) }}%</span>
      </div>

      <!-- Quick zoom controls -->
      <button @click="zoomIn" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Zoom In">
        <i class="fas fa-search-plus"></i>
      </button>
      <button @click="zoomOut" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Zoom Out">
        <i class="fas fa-search-minus"></i>
      </button>

      <!-- Download button -->
      <tooltip text="Download Spritesheet" position="bottom">
        <button @click="downloadSpritesheet" :disabled="sprites.length === 0" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
          <i class="fas fa-download"></i>
        </button>
      </tooltip>

      <!-- Help button -->
      <tooltip text="Keyboard Shortcuts" position="bottom">
        <button @click="openHelpModal" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors">
          <i class="fas fa-keyboard"></i>
        </button>
      </tooltip>
    </div>
  </header>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useSpritesheetStore } from '../composables/useSpritesheetStore';
  import Tooltip from './Tooltip.vue';

  const store = useSpritesheetStore();
  const zoomLevel = computed(() => store.zoomLevel.value);
  const sprites = computed(() => store.sprites.value);

  const emit = defineEmits<{
    (e: 'toggleHelp'): void;
  }>();

  const openHelpModal = () => {
    store.isHelpModalOpen.value = true;
  };

  // Expose store methods directly
  const { zoomIn, zoomOut, downloadSpritesheet } = store;
</script>
