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

const quickActions = [
  {
    label: 'Feed 2',
    icon: 'i-heroicons-arrow-down',
    ops: [{ op: 'feedLine', line: 2 }]
  },
  {
    label: 'Cortar',
    icon: 'i-heroicons-scissors',
    ops: [{ op: 'cut', type: 'feed' }]
  },
  {
    label: 'Pulse',
    icon: 'i-heroicons-bolt',
    ops: [{ op: 'pulse', drawer: 'drawer_1', time: 'pulse_200' }]
  },
  {
    label: 'QR',
    icon: 'i-heroicons-qr-code',
    ops: [{ op: 'qrcode', data: 'https://example.com', model: 'qrcode_model_2', level: 'level_m', size: 6 }]
  },
  {
    label: 'Barcode',
    icon: 'i-heroicons-bars-3',
    ops: [{ op: 'barcode', data: '490123456789', type: 'ean13', hri: 'below', width: 3, height: 80 }]
  }
]
</script>

<template>
  <UCard variant="soft">
    <template #header>
      <span class="text-sm font-medium text-gray-500 dark:text-gray-400">
        Atajos rápidos
      </span>
    </template>

    <div class="flex flex-wrap gap-2">
      <UButton
        v-for="action in quickActions"
        :key="action.label"
        variant="outline"
        size="sm"
        :icon="action.icon"
        @click="queue.addOperations(action.ops)"
      >
        {{ action.label }}
      </UButton>
    </div>
  </UCard>
</template>
