<template>
  <div
    v-bind:class="[isUser ? 'mainUserMessage' : 'secondaryUserMessage']"
    class="bubble bubble-bottom-left"
  >
    <p>{{ messageText }}</p>
    <div class="message-seen" color="green">
      <p v-if="messageSeen">✓✓</p>
      <p v-else>✓</p>
      <p>{{messageDate}}</p>
    </div>
  </div>
</template>

<script>
export default {
  // Change messageDate type to Date
  setup() {},
  props: {
    messageText: String,
    isUser: Boolean,
    messageSeen: Boolean,
    messageDate: String,
  },
};
</script>

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

.bubble {
  position: var(--message-position);
  right: var(--message-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(--message-border-right);
  border-left: var(--message-border-left);
  border-top: 12px solid var(--chat-bg-color) fff;
  border-bottom: 25px solid transparent;
  left: var(--message-border-position-left);
  right: var(--message-border-position-right);
  bottom: -24px;
}
</style>
