<template>
  <div class="grid gap-2">
    <label :for="id" class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
      {{ label }}
    </label>

    <div class="relative">
      <select :id="id" v-model="selectedValue" :disabled="disabled"
        class="h-14 w-full appearance-none rounded-lg border border-[#d6d3d1] bg-white px-4 pr-11 text-base leading-normal tracking-[0.16px] text-[#0c0a09] outline-none transition focus:border-2 focus:border-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-50">
        <option v-for="option in options" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </select>

      <Icon name="mdi:chevron-down"
        class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-xl text-[#777169]" />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  label: {
    type: String,
    required: true
  },
  modelValue: {
    type: String,
    required: true
  },
  options: {
    type: Array,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

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

const selectedValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
</script>
