<template>
    <div>
        <label
            :for="id"
            class="block mb-2 text-sm"
            :class="userInputValid ? 'font-medium text-gray-900' : 'font-bold text-red'">{{ label }}</label>
        <input
            type="date"
            :id="id"
            class=" border border-gray-500 text-gray-900 text-sm rounded-lg block w-full p-2.5"
            :class="userInputValid ? 'bg-slate-50 focus:ring-blue focus:border-blue' : 'border-red bg-rose-50 ring-1 ring-red ring-inset focus:ring-red focus:border-red focus:ring-inset'"
            :value="value"
            @input="$emit('update:value', $event.target.value)"
            :placeholder="placeholder"
            :required="required"
            :min="min"
            :max="max">
    </div>
</template>

<script>
export default {
    name: "InputDate",
    emits: ['update:value'],
    props: {
        id: {
            type: String,
            default: '',
            required: true
        },
        label: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: ''
        },
        required: {
            type: Boolean,
            default: false
        },
        min: {
            type: String,
            default: null
        },
        max: {
            type: String,
            default: null
        },
        userInputValid: {
            type: Boolean,
            default: true
        }
    }
}
</script>
