<script setup>
    defineProps({
        field: {
            type: String
        },
        label: {
            type: String,
            required: false,
        },
        filled: {
            type: Boolean,
            required: false,
            default: true,
        },
        name: {
            type: String,
            required: true,
        },
        type: {
            type: String,
            default: 'text',
        },
        helpText: {
            type: String,
            default: '',
        }
    })

    defineEmits(['update:field'])
</script>

<template>
    <div class="d-flex flex-column gap-2 mb-4">
        <label class="custom-label" :for="name">{{ label }}</label>
        <input 
            class="custom-input"
            :class="[!filled ? 'custom-input-light' : '']"
            :type="type" 
            :id="name"
            :name="name" 
            :value="field"
            @input="$event => $emit('update:field', $event.target.value)">
        <span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
    </div>
</template>

<style scoped>
    .help {
        font-size: 12px;
        font-weight: 300;
        color: rgb(108, 92, 92);
    }
</style>