<template>
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div :class="this.class[type]" class="toast-header fw-bold">
        <!-- <img src="..." class="rounded me-2" alt="..."> -->
        <strong class="me-auto">{{ title }}</strong>
        <small>{{ date.toLocaleTimeString() }}</small>
        <button type="button" class="btn-close" aria-label="Close" @click.prevent="close()"></button>
    </div>
    <div class="toast-body">
        {{ msg }}
    </div>
    </div>
</template>

<script>

export default{
    props:{
        title: {type:[String,Number], default:"new Notification"},
        msg: {type:[String,Number,Object], default:"This is an empty notification"},
        type: {type:String ,default:"info"},
        date: {type:Date, default:new Date()}
    },
    data(){
        return {
            class:{
                info: 'bg-primary text-light',
                warning: 'bg-warning text-dark',
                error: 'bg-danger text-light',
                success: 'bg-success text-dark'

            }
        }
    },
    methods:{
        close(){
            this.$emit('close');
        }        
    },
    
}
</script>