<template>
  <div class="Input">
    <div class="input-wrapper flex-col">
      <input
        v-model="text"
        :type="type"
        :id="id"
        :step="step"
        :min="min"
        :max="max"
        :required="required"
        placeholder=" "
        @blur="emit('blur')"
        :inputmode="type === 'number' ? 'decimal' : undefined"
      />
      <label :for="id">{{ label }}</label>
    </div>
    <span v-if="message">{{ message }}</span>
  </div>
</template>

<script setup lang="ts">
type Props = {
  type ?: 'text' | 'number'
  max ?: number
  min ?: number
  step ?: number
  required ?: boolean
  message ?: string
  label : string
  id : string
}

const {
  type = 'text',
  required = false,
  step = 0.01,
  min = 1,
} = defineProps<Props>()

const emit = defineEmits(['blur'])

const text = defineModel()
</script>
