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

const props = withDefaults(defineProps<{
  modelValue: string;
  maxlength?: number;
  disabled?: boolean;
  autofocus?: boolean;
  id?: string;
}>(), {
  modelValue: '',
  maxlength: 6,
  disabled: false,
  autofocus: false,
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const value = computed({
  get: () => props.modelValue,
  set: (v: string) => emit('update:modelValue', v.slice(0, props.maxlength)),
});
</script>

<template>
  <div class="w-full flex justify-center">
    <input
      :id="id"
      v-model="value"
      type="text"
      inputmode="numeric"
      :maxlength="maxlength"
      :disabled="disabled"
      :autofocus="autofocus"
      class="sr-only"
    />
    <slot />
  </div>
</template>
