<script setup>
    defineProps({
        msg: {
            type: String,
            required: true,
        },
        isError: {
            type: Boolean,
            default: true,
        },
        showIcon: {
            type: Boolean,
            default: true,
        }
    })
</script>

<template>
    <div class="badge" :class="[isError ? 'badge-error' : 'badge-success']">
        <span>
            <i v-if="showIcon && isError" class="fa-solid fa-circle-exclamation me-2"></i> 
            <i v-if="showIcon && !isError" class="fa-solid fa-circle-check"></i>
            {{ msg }}
        </span>
    </div>
</template>

<style scoped>
    .badge {
        display: flex;
        width: 100%;
        color: #FFF;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 8px;
        justify-content: center;
        padding: 10px 16px;
        margin-bottom: 12px;
    }
    
    .badge-error {
        background-color: rgb(238, 101, 101);
    }
    .badge-success {
        background-color: rgb(29, 162, 113);
    }

    @media (max-width: 768px) {
        .badge {
            font-size: 0.8rem;
            font-weight: 400;
            border-radius: 8px;
            padding: 10px 12px;
        }
    }
</style>