<template>
  <div class="space-y-1">
    <label v-if="label" :for="id" class="text-sm font-medium text-gray-700">{{ label }}</label>
    <input
      :id="id"
      :value="props.modelValue"
      :type="props.type"
      :placeholder="props.placeholder"
      class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500"
      @input="onInput"
    >
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  modelValue?: string
  type?: string
  label?: string
  placeholder?: string
  id?: string
}>(), {
  modelValue: '',
  type: 'text',
  label: '',
  placeholder: '',
  id: undefined,
})

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

function onInput(event: Event) {
  const target = event.target as HTMLInputElement
  emit('update:modelValue', target.value)
}
</script>
