﻿<template>
  <div class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out py4">
    <div class="flex justify-between items-center mb-2">
      <h3 class="text-lg font-bold p-3">{{ content.title }}</h3>
    </div>
    <img v-if="content.urls !== null" :src="content.urls" alt="thumbnail" class="w-full ">
    <div class="p-3">
      <p class="text-gray-600 mb-4">{{ content.description }}</p>
      <div class="flex items-center">
        <router-link class="capitalize px-2" :to="`/@${props.content.createdByName}`">
          <img :src="content.createdByPortraitUrl" alt="profile image" class="w-10 h-10 rounded-full">
        </router-link>
        <div class="ml-4">
          <h4 class="text-md font-bold">{{ content.name }}</h4>
          <div class="text-gray-600 text-sm">
            <span>{{ content.reactions.length }} reactions</span> -
            <span>{{ time_ago(content.createdAt) }}</span>            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script setup>
import {time_ago} from "@/internal_time_ago.js";

const props = defineProps({
  content: {
    type: Object,
    required: true
  }
});
</script>
