<script setup lang="ts">
const printers = usePrinters()

// Cargar impresoras al montar
onMounted(() => {
  printers.fetchPrinters()
})

const options = computed(() =>
  printers.printers.value.map(p => ({
    label: p.name + (p.isDefault ? ' (default)' : ''),
    value: p.id
  }))
)

async function handleChange(value: string) {
  await printers.selectPrinter(value)
}
</script>

<template>
  <div class="flex items-center gap-2">
    <UIcon name="i-heroicons-printer" class="w-5 h-5 text-gray-500" />
    <USelect
      v-if="printers.printers.value.length > 0"
      :model-value="printers.selectedPrinterId.value"
      :items="options"
      placeholder="Seleccionar impresora"
      class="min-w-[200px]"
      @update:model-value="handleChange"
    />
    <span v-else class="text-sm text-gray-500">
      No hay impresoras configuradas
    </span>
  </div>
</template>
