<template>
  <modal :hide-header="false" :small="true">
    <template #header>
      <h4>{{ type }} bearbeiten</h4>
    </template>

    <modal-input :value="name" :placeholder="placeholder" data-cy="edit-name-input" @input="input" />
    <template #footer>
      <a class="button button--primary" data-cy="modal-save-button" @click="emit('save')">Speichern</a>
      <a class="button" @click="emit('cancel')">Abbrechen</a>
    </template>
  </modal>
</template>

<script setup lang="ts">
import Modal from '@/components/Modal.vue';
import ModalInput from '@/components/ModalInput.vue';

export interface Props {
  name: string;
  type: string;
  placeholder: string;
}

withDefaults(defineProps<Props>(), {
  name: '',
  type: '',
  placeholder: 'Namen bearbeiten',
});

const emit = defineEmits(['cancel', 'save', 'input']);

const input = (e: string) => {
  emit('input', e);
};
</script>
