<template>
  <label v-if="label" class="w-full space-y-1">
    <span class="text-base font-semibold text-base-content">{{ label }}</span>
    <input
      v-bind="$attrs"
      class="input input-bordered w-full bg-base-100 text-base-content placeholder-base-content/60"
      :value="modelValue"
      @input="onInput"
    />
  </label>
  <input
    v-else
    v-bind="$attrs"
    class="input input-bordered w-full bg-base-100 text-base-content placeholder-base-content/60"
    :value="modelValue"
    @input="onInput"
  />
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
  label: {
    type: String,
    default: '',
  },
})

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