<template>
  <modal
    class="confirm-dialog"
    data-cy="confirm-dialog"
    :small="true"
  >
    <template #header>
      <h3 class="confirm-dialog__heading">{{ title }}</h3>
    </template>
    <p class="confirm-dialog__content">{{ message }}</p>
    <template #footer>
      <div>
        <a
          class="button button--primary"
          data-cy="modal-save-button"
          @click="$emit('confirm')"
        >
          Bestätigen
        </a>
        <a
          class="button"
          data-cy="modal-cancel-button"
          @click="$emit('cancel')"
        >
          Abbrechen
        </a>
      </div>
    </template>
  </modal>
</template>

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

export interface Props {
  title: string;
  message: string;
}

defineProps<Props>();
defineEmits(['confirm', 'cancel']);
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.confirm-dialog {
  &__heading {
    @include modal-heading;
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding: $medium-spacing 0;
  }
}
</style>
