<template>
    <div class="ui-input">
        <template v-if="type">
            <component :is="InputComponents[type].component" v-bind="$attrs" :model-value="props.modelValue" @update:model-value="handleUpdate">
                <template v-for="(slot, name) in $slots" #[name]="raw">
                    <slot :name="name" v-bind="raw" />
                </template>
            </component>
            <slot />

            <!-- <p class="error-msg" v-if="error">{{ error }}</p> -->
        </template>
    </div>
</template>

<script setup lang="ts">
import { InputComponents, inputProps } from './input'

defineOptions({
    name: 'UIInput',
})
const props = defineProps(inputProps)
const emit = defineEmits(['update:modelValue'])
const handleUpdate = (newValue: string) => {
    emit('update:modelValue', newValue)
}
</script>
