<template>
  <div class="news-preview">
    <div class="row">
      <div class="col-sm-12">
        <h2><a target="_blank" :href="post.url">{{ post.title }}</a></h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <div class="row">
          <div class="col-sm-12">
            <div class="news-subtitle">
              <img v-if="post.primaryAuthor?.profileImage" style="max-height: 25px; padding-right: 10px;"
                :src="post.primaryAuthor.profileImage">
              {{ `${post.primaryAuthor?.name ?? 'Anonymous'} • ${postDate} • ${post.readingTime} minute read` }}
            </div>
          </div>
          <div class="col-sm-12">{{ post.customExcerpt ?? post.excerpt }}<a target="_blank" :href="post.url">more
              &gt;&gt;
            </a></div>
        </div>
      </div>
      <div class="col-sm-4"><a target="_blank" :href="post.url"><img style="max-height: 225px; max-width: 100%"
            :src="post.featureImage" :alt="post.featureImageAlt ?? ''"></a></div>
    </div>
  </div>
</template>

<script lang="ts">
import type { NewsPost } from '@/services/newsService'
import type { PropType } from 'vue'

export default {
  name: "NewsPreview",
  props: {
    post: {
      type: Object as PropType<NewsPost>,
      required: true,
    }
  },
  computed: {
    postDate(): string {
      if (!this.post.publishedAt) return ''
      return new Date(Date.parse(this.post.publishedAt)).toDateString()
    }
  }
}
</script>