<template>
  <div
    v-bind:class="[isUser ? 'mainUserMsg' : 'secondaryUserMsg']"
    class="bubble bubble-bottom-left"
  >
    <p>{{ msgText }}</p>
  </div>
</template>

<script>
export default {
  setup() {},
  props: {
    msgText: String,
    isUser: Boolean,
  },
};
</script>

<style scoped>
.mainUserMsg {
  --chat-bg-color: #368dda;
  --msg-position: absolute;
  --msg-right: 0;
  --msg-border-right: 24px solid var(--chat-bg-color);
  --msg-border-left: 12px solid transparent;
  --msg-border-position-left: 70%;
}
.secondaryUserMsg {
  --chat-bg-color: green;
  --msg-position: relative;
  --msg-right: none;
  --msg-border-right: 12px solid transparent;
  --msg-border-left: 24px solid var(--chat-bg-color);
  --msg-border-position-left: 12%;
}

.bubble {
  position: var(--msg-position);
  right: var(--msg-right);
  font-family: sans-serif;
  font-size: 18px;
  line-height: 24px;
  width: 200px;
  background: var(--chat-bg-color);
  border-radius: 40px;
  padding: 20px;
  text-align: center;
  color: black;
}

.bubble-bottom-left:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: var(--msg-border-right);
  border-left: var(--msg-border-left);
  border-top: 12px solid var(--chat-bg-color) fff;
  border-bottom: 25px solid transparent;
  left: var(--msg-border-position-left);
  right: var(--msg-border-position-right);
  bottom: -24px;
}
</style>
