<template>
  <div class="TextField">
    <div class="wrapper">
      <Icon v-if="icon" class="icon" :name="icon" mode="svg" />
      <input v-model="text" :type="type" :id="id" placeholder=" " @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
      <label :for="id">{{ label }}</label>
    </div>
    <span v-if="message">{{ message }}</span>
  </div>
</template>

<script setup lang="ts">
type Props = {
  type?: 'text' | 'number';
  message?: string;
  icon?: string;
  label: string;
  id: string;
  mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
};

const { type = "text", mode = "text" } = defineProps<Props>();

const emit = defineEmits(['blur', 'input']);

const text = defineModel();
</script>
