<script setup lang="ts">
interface Props {
    modelValue?: any
    size?: 'xs' | 'sm' | 'md' | 'lg'
    color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
}

const props = withDefaults(defineProps<Props>(), {
    size: 'md',
    color: 'regular'
})

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

const styleClass = computed(() => {
    const sizeVariants = {
        xs: 'dui-input-xs',
        sm: 'dui-input-sm',
        md: 'dui-input-md',
        lg: 'dui-input-lg'
    }
    const colorVariants = {
        regular: '',
        primary: 'dui-input-primary',
        secondary: 'dui-input-secondary',
        info: 'dui-input-info',
        success: 'dui-input-success',
        warning: 'dui-input-warning',
        error: 'dui-input-error'
    }
    const sizeClass = sizeVariants[props.size]
    const colorClass = colorVariants[props.color]
    return [sizeClass, colorClass]
})
</script>
<template>
    <input
        type="text"
        :value="props.modelValue"
        @input="emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
        class="dui-input-bordered dui-input my-1 ml-auto mr-1 max-w-xs flex-grow"
        :class="styleClass"
    />
</template>
