<template>
  <TitanSelectContainer
    v-bind="props"
    variant="icon"
    @update:modelValue="emit('update:modelValue', $event as string)"
  >
    <!-- @ts-expect-error - TypeScript has limitations with template v-for type inference -->
    <template v-for="slotName in (Object.keys($slots) as string[])" :key="slotName" #[slotName]="slotData">
      <slot :name="slotName" v-bind="slotData" />
    </template>
  </TitanSelectContainer>
</template>

<script setup lang="ts">
import type { IconSelectOption } from '@/types/components'
import TitanSelectContainer from './TitanSelectContainer.vue'

/**
 * @deprecated Use TitanSelectContainer with variant="icon" instead
 */
interface Props {
  modelValue?: string
  options: IconSelectOption[]
  disabled?: boolean
  required?: boolean
  error?: boolean
  name?: string
  showCheckmark?: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>
