<script setup lang="ts">
  const props =  defineProps({
    ownMessage: Boolean,
    timestamp: String,
    message: String,
    gif: Boolean,
    link: Boolean,
    url: String,
  })
</script>

<template>
  <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
    <p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
    <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
    <a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>

    <div style="text-align: right;">
      <small style="margin-top: 0;">{{props.timestamp}}</small>
    </div>
  </div>
</template>

<style scoped>
  .message {
    border-radius: 10px;
    width: 15rem;
    padding: 7px;
    margin:3px;
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);
  }

  .message p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .sent {
    background: #729EA1;
    margin-left: auto;
    margin-right: 0;
  }

  .received {
    background: white;
  }
</style>
