<template>
    <div class="Comment" :class="props.item.side">
        <div class="Avatar"> <v-icon >fas fa-user</v-icon> </div>
        <div class="Bubble">
            <div class="Author"> {{ props.item.user_name }} <span class="Date"> {{ props.item.date }} </span> </div>
            {{ props.item.text }}
        </div>
    </div>
</template>


<script>

export default {
    props: {
        props: { default: "" },
    },
    data () {
        return {
        }
    }

};
</script>
<style scoped lang="scss">
    .Comment {
        width: 100%;
        padding: 10px;
        display: flex;
    }
    .Comment .Avatar {
        padding: 10px;
    }
    .Comment .Avatar .v-icon {
        font-size: 32px;
    }
    .Comment .Bubble {
        padding: 20px 40px;
        height: auto;
        width: 80%;
        color: #000000;
        border-radius: 25px;
        direction: rtl;
        text-align: justify;
    }
    .Comment.Left {
        direction: ltr;
        align-items: flex-end;
    }
    .Comment.Left .Bubble {
        border-bottom-left-radius:0px;
    }
    .Comment.Right .Bubble {
        border-top-right-radius:0px;
    }
    .Bubble .Author {
        font-size: 22px;
    }
    .Bubble .Author .Date {
        font-size: 14px;
        color: #8b8b8b;
        float: left;

    }

    .Comment.Red .Avatar .v-icon {
        color: #ee3552;
    }
    .Comment.Red .Bubble {
        // float: left;
        border: 2px solid #ee3552;
        background-color: rgba(238, 53, 82, 0.05);
    }
    .Comment.Cyan .Avatar .v-icon {
        color: #32c5d2;
    }
    .Comment.Cyan .Bubble {
        // float: right;
        border: 2px solid #32c5d2;
        background-color: rgba(50, 197, 210, 0.05);
    }
    .Comment.Gray .Avatar .v-icon {
        color: #d0d0d0;
    }
    .Comment.Gray .Bubble {
        // float: right;
        border: 2px solid #d0d0d0;
        background-color: rgba(241, 241, 241, 0.5);
        border-top-right-radius:0px;
    }

</style>

