<template>
  <TitanSelectContainer
    v-bind="props"
    variant="inline"
    @update:modelValue="emit('update:modelValue', $event)"
    @change="emit('change', $event)"
  >
    <!-- @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 { SelectOption } from '@/types/components'
import TitanSelectContainer from './TitanSelectContainer.vue'

/**
 * @deprecated Use TitanSelectContainer with variant="inline" instead
 */
interface Props {
  modelValue?: string | number | (string | number)[]
  options: string[] | SelectOption[]
  multiple?: boolean
  allowCustom?: boolean
  disabled?: boolean
  required?: boolean
  error?: boolean
  errorMessage?: string
  label?: string
  name?: string
  showCheckmark?: boolean
}

const props = defineProps<Props>()

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