<script setup>
import { onMounted, ref } from 'vue'

const props = defineProps({
  titel: { type: String, required: true },
  frage: { type: String, default: '' },      // gesetzt = Rückfrage statt Eingabe
  platzhalter: { type: String, default: '' },
  knopf: { type: String, default: 'Bestätigen' },
  meldung: { type: String, default: '' },
})
const emit = defineEmits(['bestaetigt', 'abbrechen'])

const wert = ref('')
const feld = ref(null)

function bestaetigen() {
  if (!props.frage && !wert.value.trim()) return
  emit('bestaetigt', wert.value.trim())
}

onMounted(() => feld.value?.focus())
</script>

<template>
  <div class="schleier" @click.self="emit('abbrechen')">
    <div class="modal karte">
      <h2>{{ titel }}</h2>
      <p v-if="frage" class="frage">{{ frage }}</p>
      <input
        v-else
        ref="feld"
        v-model="wert"
        :placeholder="platzhalter"
        @keyup.enter="bestaetigen"
        @keydown.esc="emit('abbrechen')"
      >
      <p v-if="meldung" class="meldung">{{ meldung }}</p>
      <footer>
        <button @click="emit('abbrechen')">Abbrechen</button>
        <button class="primaer" :disabled="!frage && !wert.trim()" @click="bestaetigen">{{ knopf }}</button>
      </footer>
    </div>
  </div>
</template>
