<script setup lang="ts">
const props = defineProps<{
    options: Array<{ label: string; value: string }>,
    placeholder: string, 
    modelValue: string
}>();

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

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

<template>
    <select class="bg-zinc-900 p-2 rounded-md" :value="props.modelValue" @change="handleSelect">
        <!-- Placeholder as the first option -->
        <option value="" disabled selected>{{ props.placeholder }}</option>
        
        <!-- Render options dynamically -->
        <option v-for="option in props.options" :key="option.value" :value="option.value">
            {{ option.label }}
        </option>
    </select>
</template>