<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  label: String,
  placeholder: String,
  inputError: String,
  forceValidate: Boolean,
})
const inputText = defineModel('inputText')

const touched = ref(false)
</script>

<template>
  <label class="label">{{ props.label }}</label>
  <input
    :class="[
      'input w-full',
      { 'input-error': (touched || props.forceValidate) && props.inputError !== '' },
    ]"
    :placeholder="props.placeholder"
    v-model="inputText"
    @blur="touched = true"
  />
  <div
    v-if="(touched || props.forceValidate) && props.inputError !== ''"
    class="text-error text-sm mt-1"
  >
    {{ props.inputError }}
  </div>
</template>
