<template>
    <div
        v-if="statusMessage"
        :class="['statusMessage', `statusMessage--${statusType}`]"
    >
        {{ statusMessage }}
    </div>
</template>

<script>
export default {
    name: 'statusMessage',
    props: {
        statusMessage: {
            type: String,
            default: ''
        },
        statusType: {
            type: String,
            default: 'loading'
        }
    }
}
</script>

<style lang="less" scoped>
.statusMessage {
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;

    &--loading { background-color: var(--status-loading-bg); color: var(--status-loading-text); }
    &--success { background-color: var(--status-success-bg); color: var(--status-success-text); }
    &--error   { background-color: var(--status-error-bg); color: var(--status-error-text); }
}

</style>
