<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>
    <template></template>
    <div class="m-1">
        <label v-if="title" class="pe-4">{{ title }}</label>
        <input @input="err = false" class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" :class="{ 'input-has-error': !!err }" v-model="model"
            v-bind="$attrs" />
        <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
    </div>
</template>