<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  label?: string
  items: any[]
  labelCharCount?: number
  prependMarginEnd?: number
}>()

const modelValue = defineModel<any>({ required: true })

const prependMinWidth = computed(() =>
  props.labelCharCount != null ? `${props.labelCharCount * 0.785}rem` : undefined,
)

const marginEndStyle = computed(() => `${props.prependMarginEnd ?? 8}px`)
</script>

<template>
  <v-select v-model="modelValue" variant="outlined" density="compact" hide-details :items="items">
    <template v-if="label" #prepend>
      <span
        class="text-title-small"
        :style="prependMinWidth ? { minWidth: prependMinWidth } : undefined"
      >
        {{ label }}
      </span>
    </template>
  </v-select>
</template>

<style scoped>
:deep(.v-input__prepend) {
  margin-inline-end: v-bind(marginEndStyle);
}
</style>
