<script setup lang="ts">
interface Prop
{
    error?: string | boolean;
    title: string;
}
const props = defineProps<Prop>();
const model = defineModel<string>();

const err = ref<string | boolean | undefined>(props.error);

watchEffect(() => err.value = props.error);
</script>

<template>
    <div class="m-1 flex justify-between items-center gap-8">
        <label v-if="title" class="pe-4">{{ title }}</label>
        <Input class="flex-1" @input="err = false" :class="{ 'input-has-error': !!err }" v-model="model" v-bind="$attrs" />
    </div>
    <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
</template>