<template>
    <div class="modal-container">
        <div class="title-container">
            <p id="title">Remove File</p>
        </div>
        <hr>
        <p id="modal-text" >Are you sure you want to remove "{{ nameFile }}"?</p>
        <div class="reply">
            <button @click="$emit('confirm')">Yes</button>
            <button @click="$emit('cancel')">No</button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            nameFile: {
                type: String,
                default: 'file_name'
            }
        }
    }
</script>

<style scoped>
    * {
        color: white;
        font-family: monospace;
        box-sizing: border-box; /* Ensures padding doesn't expand height beyond 200px */
    }

    #title {
        font-size: 18px;
    }

    .modal-container {
        width: 400px;
        height: 200px;
        background-color: rgb(32, 59, 50);
        border: none;
        border-radius: 15px;
        padding: 15px;
    }

    hr {
        background-color: white;
        border-radius: 10px;
        height: 4px;
    }

    #modal-text {
        text-align: center;
        margin-top: 15px;
    }

    .reply {
        margin-top: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    button {
        background-color: rgb(37, 110, 85);
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    button:hover {
        background-color: rgb(58, 171, 133);
    }

    button:active {
        background-color: rgb(54, 158, 123);
        transform: translateY(3px);
    }
</style>