<template>
    <div
            ref="container" class="popupContainer"
            v-bind:class="{
                'type-success': data.type === 'success',
                'type-failure': data.type === 'failure'
            }">
        {{ data.msg }}
    </div>
</template>

<script>
    export default {
        name: "PopupMessage",
        props: ['message', 'data'],
    }
</script>

<style scoped>
    .popupContainer {
        padding: 30px;

        font-size: 30px;
        text-align: center;

        position: fixed;
        bottom: 0;

        left: 0;
        right: 0;
    }

    .type-success {
        background-color: #00ff5e;
    }

    .type-failure {
        background-color: #ff002d;
    }
</style>