<template>
  <fieldset class="fieldset mb-0">
    <input
        :type="type"
        :inputmode="inputMode"
        class="input input-lg w-full"
        :class="error ? 'input-error' : ''"
        :placeholder="placeholder"
        v-model="model"
        @input="$emit('clearError')"
        :maxlength="maxlength"
    />
    <p v-if="error" class="label">{{ error }}</p>
  </fieldset>
</template>

<script setup lang="ts">
import {computed} from "vue";

const model = defineModel();
const props = defineProps({
  error: {
    type: String,
    default: null,
  },

  placeholder: {
    type: String,
    default: null,
  },

  type: {
    type: String,
    default: 'text',
  },

  maxlength: {
    type: Number,
    default: 1000,
  }
});
const emits = defineEmits(['clearError']);

const inputMode = computed(() => {
  switch (props.type) {
    case 'email': return 'email';
    case 'tel': return 'tel';
    case 'number': return 'numeric';
    default: return 'text';
  }
});
</script>
