<script setup lang="ts">
defineProps<{
  modelValue: string | number
  options: Array<{ label: string; value: string | number }>
  readonly?: boolean
}>()

const emit = defineEmits(['update:modelValue', 'enter'])

const onChange = (e: Event) => {
  const target = e.target as HTMLSelectElement
  emit('update:modelValue', target.value)
}
</script>

<template>
  <select
    :value="modelValue"
    :disabled="readonly"
    style="width: 100%; padding: 4px 8px; border: 1px solid #CBD5E1; border-radius: 2px; font-size: 12px; font-weight: bold; background: white; outline: none; cursor: pointer;"
    @change="onChange"
    @keydown.enter="emit('enter')">
    <option v-for="opt in options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
  </select>
</template>
