<script lang="ts">
import { defineComponent, SetupContext, Ref, ref } from 'vue';

export default defineComponent({
    name: 'Navbar',
    emits: ['close'],
    props:["type", "message"],
    setup(props, { emit }: SetupContext) {

        const type:Ref<string> = ref(props.type);
        const message:Ref<string> = ref(props.message);

        const close = () => {
            emit("close");
        };

        return {
            close,
            type,
            message,
        };
    },
});
</script>


<template>
    <div v-if="type=='info'" role="alert" class="alert alert-info alert-soft">
        <span>{{ message }}</span>
        <button class="btn btn-soft btn-info" v-on:click="close">Close</button>
    </div>
    <div v-if="type=='success'" role="alert" class="alert alert-success alert-soft">
        <span>{{ message }}</span>
        <button class="btn btn-soft btn-success" v-on:click="close">Close</button>
    </div>
    <div v-if="type=='warning'" role="alert" class="alert alert-warning alert-soft">
        <span>{{ message }}</span>
        <button class="btn btn-soft btn-warning" v-on:click="close">Close</button>
    </div>
    <div v-if="type=='error'" role="alert" class="alert error alert-soft">
        <span>{{ message }}</span>
        <button class="btn btn-soft btn-error" v-on:click="close">Close</button>
    </div>
</template>

<style scoped></style>