<script setup lang="ts">
const queue = usePrintQueue()
</script>

<template>
  <header class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
    <div>
      <h1 class="text-xl font-bold text-gray-900 dark:text-white">
        PrinterCentral
      </h1>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Control de impresoras Epson ePOS
      </p>
    </div>

    <div class="flex items-center gap-2">
      <!-- Contador de cola (visible en desktop) -->
      <UBadge
        v-if="queue.operations.value.length > 0"
        color="primary"
        variant="subtle"
        class="hidden md:flex"
      >
        {{ queue.operations.value.length }} en cola
      </UBadge>

      <!-- Toggle Dark/Light mode -->
      <UColorModeButton />
    </div>
  </header>
</template>
