<script setup>
    const props = defineProps({
        field: {
            type: [String, Number, Date]
        },
        label: {
            type: String,
            required: false,
        },
        filled: {
            type: Boolean,
            required: false,
            default: true,
        },
        readonly: {
            type: Boolean,
            required: false,
            default: false,
        },
        name: {
            type: String,
            required: true,
        },
        type: {
            type: String,
            default: 'text',
        },
        helpText: {
            type: String,
            default: '',
        },
        required: {
            type: Boolean,
            default: false,
        },
        error: {
            type: String,
        },
        step: {
            type: Number,
            default: 0.1
        }
    })

    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" 
            :min="0"
            :step="step"
            :value="field"
            :disabled="readonly"
            :readonly="readonly"
            :required="required"
            @input="$event => $emit('update:field', $event.target.value)">
        <span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
        <span class="error-msg" v-if="error">{{ error }}</span>
    </div>
</template>

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

    .error-msg {
        color: red;
        font-size: 12px;
        font-weight: 300;
    }
</style>