<template>
    <div v-if="validator?.$error" class="text-danger">
        <small class="bold" v-for="(object, param) in validator.$params" :key="param">
            <span v-if="object.type === 'minLength'">{{object.min}} characters</span>
            <span v-if="object.type === 'minValue'">{{object.min}}</span>
            <span v-if="object.type === 'sameAs'">{{object.eq}} field</span>
        </small>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    validator: any;
}>();

const errorMessages: Record<string, string> = {
    required: 'this field is required',
    email: 'enter a valid email address',
    minLength: 'this field must have at least',
    sameAs: 'this field must match the',
    minValue: 'this field must at least be',
};
</script>
