<template>
    <div data-test="confirmBox" :class="['c-confirm-box', (show ? 'show' : 'hide')]">
        <div class="modal">
            <div class="header">
                <h4>{{ this.headerText }}</h4>
            </div>
            <div class="body">
                <p class="message">{{ this.message }}</p>
                <div class="navigatableElements buttons">
                    <button class="confirm" data-test="confirmation_confirm" type="button" @click="$emit('confirm')">{{ this.confirmText }}</button>
                    <button class="cancel" data-test="confirmation_cancel" type="button" @click="$emit('cancel')">{{ this.cancelText }}</button>
                </div>
            </div>
        </div>
        <div class="shader"></div>
    </div>
</template>

<script>
export default {
    name: "ConfirmModal",
    props: {
        show: {
            type: Boolean,
            required: false,
            default: true
        },
        headerText: {
            type: String,
            required: true
        },
        message: {
            type: String,
            required: true
        },
        confirmText: {
            type: String,
            required: true
        },
        cancelText: {
            type: String,
            required: true
        }
    }
}
</script>

<style scoped>

</style>