<template>
  <button class="chat-preview">
    <div class="chat-picture">
      <figure>
        <img src="chat-picture" alt="chat-picture">
      </figure>
    </div>
    <div class="chat-text">
      <div class="chat-name">
        <h3>{{ chatName }}</h3>
      </div>
      <div class="chat-last-message">
        <p>{{ chatLastMessage }}</p>
      </div>
      <div class="chat-info">
        <div class="chat-seen" color="green">
          <p v-if="chatSeen">✓✓</p>
          <p v-else>✓</p>
        </div>
        <div class="chat-date">{{ chatDate }}</div>
        <div
          v-if="chatNewMessages > 0"
          class="chat-new-messages"
          border-radius="100%"
          color="white"
          background="blue"
        >
          {{ chatNewMessages }}
        </div>
      </div>
    </div>
  </button>
</template>

<script>
export default {
  setup() {},
  props: {
    ChatPicture: String,
    chatName: String,
    chatLastMessage: String,
    chatSeen: Boolean,
    chatDate: String,
    chatNewMessages: Number,
  },
};
</script>

<style scoped></style>
