<template>
    <transition name="fade">
        <div class="chatBubble" :class="{'chatBubble--user': isUser}">
            <div class="chatBubble__content" :class="{'chatBubble__content--user': isUser}">
                <slot></slot>
            </div>
            <div class="chatBubble__user">
                <small class="chatBubble__time">{{ time }}</small>
                <small class="chatBubble__user">
                    {{ isUser ? 'You' : 'Agent' }}
                </small>
            </div>

        </div>
    </transition>
</template>

<script>
export default {
    name: 'chatBubble',
    props: {
        isUser: {
            type: Boolean,
            default: false
        },
        time: {
            type: String,
            default: ''
        }
    },
}
</script>

<style lang="less" scoped>
@import "../../../styles/elements/bubble.less";
</style>
