<script setup lang="ts">
const activeTab = defineModel<string>({ default: 'constructor' })

const queue = usePrintQueue()

const tabs = computed(() => [
  {
    label: 'Constructor',
    value: 'constructor',
    icon: 'i-heroicons-pencil-square'
  },
  {
    label: `Cola (${queue.operations.value.length})`,
    value: 'queue',
    icon: 'i-heroicons-queue-list'
  },
  {
    label: 'Templates',
    value: 'templates',
    icon: 'i-heroicons-document-duplicate'
  },
  {
    label: 'Impresoras',
    value: 'printers',
    icon: 'i-heroicons-printer'
  }
])
</script>

<template>
  <nav class="fixed bottom-0 left-0 right-0 bg-white/95 dark:bg-gray-950/95 backdrop-blur border-t border-gray-200 dark:border-gray-800 md:hidden z-50 safe-area-bottom">
    <UTabs
      v-model="activeTab"
      :items="tabs"
      variant="pill"
      color="neutral"
      :content="false"
      class="justify-center py-2"
      :ui="{
        list: 'justify-center gap-1',
        trigger: 'px-3 py-2'
      }"
    />
  </nav>
</template>
