<script setup lang="ts">
import type { DropDownControl } from '@/components/inspector/controls'
import { useId } from 'vue'
import BaseNamedControlView from './BaseNamedControlView.vue'

const {
  control,
} = defineProps<{
  control: DropDownControl
}>()

const id = useId()
</script>

<template>
  <BaseNamedControlView :id :control>
    <div>
      <select
        :id
        v-model="control.ref.value"
        :disabled="control.disabled"
        class="tw:w-full tw:max-w-full control-select"
      >
        <option v-for="option in control.options" :key="option" :value="option">
          {{ option }}
        </option>
      </select>
    </div>
  </BaseNamedControlView>
</template>

<style scoped></style>
