<script setup>
defineProps({
    modelValue: [String, Boolean, Number],
    id: String,
    type: {
        type: String,
        default: 'text',
    },
    label: String,
    placeholder: {
        type: String,
        default: null,
    },
    error: {
        type: String,
        default: null,
    },
    textareaHeight: {
        type: String,
        default: null,
    }
});
defineEmits(['update:model-value']);
</script>

<template>
    <div :class="['flex w-full', (type === 'checkbox' ? 'flex-row gap-2 items-center bg-gray-200 px-2 py-2 rounded-md' : 'flex-col gap-1')]">
        <label v-if="id"
            :for="id"
            class="text-gray-500">{{ label }}</label>
        <textarea v-if="type === 'textarea'"
            :id="id"
            :class="['w-full min-w-full max-w-full h-[200px] min-h-[200px] px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
            :value="modelValue"
            @input="$emit('update:model-value', $event.target.value)"
            :placeholder="placeholder"></textarea>
        <input v-else-if="type === 'checkbox'"
            :id="id"
            :checked="modelValue"
            @input="$emit('update:model-value', $event.target.checked)"
            :true-value="true"
            :false-value="false"
            type="checkbox" />
        <input v-else
            :id="id"
            :class="['w-full px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
            :type="type"
            :value="modelValue"
            @input="$emit('update:model-value', $event.target.value)"
            :placeholder="placeholder" />
        <span class="text-red-400" v-if="error">{{ error }}</span>
    </div>
</template>