<script setup lang="ts">
import Select from 'primevue/select'
import type { UiSelectOption } from '../contracts'

defineProps<{ modelValue: unknown; inputId?: string; options: UiSelectOption[]; disabled?: boolean; invalid?: boolean; placeholder?: string }>()
defineEmits<{ 'update:modelValue': [value: unknown]; blur: [event: Event] }>()
</script>

<template>
  <Select
    class="ks-select"
    :input-id="inputId"
    :model-value="modelValue"
    :options="options"
    option-label="label"
    option-value="value"
    option-disabled="disabled"
    :disabled="disabled"
    :invalid="invalid"
    :placeholder="placeholder"
    @update:model-value="$emit('update:modelValue', $event)"
    @blur="$emit('blur', $event as unknown as Event)"
  />
</template>

<style scoped>
.ks-select { width: 100%; min-height: var(--ks-control-height); border: 1px solid var(--ks-color-neutral-300); border-radius: var(--ks-radius-sm); background: #fff; }
</style>
