<template>
  <a :href="url">
    <div
      class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden"
    >
      <img
        :src="video.snippet.thumbnails.high.url"
        alt=""
        class="w-full h-full object-center object-cover group-hover:opacity-75"
      />
    </div>
    <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-700">
      {{ publishedHuman }}
    </time>
    <h3 class="mt-1 text-lg font-medium text-gray-900">
      {{ video.snippet.title }}
    </h3>
  </a>
</template>

<script lang="ts">
import Vue from 'vue'
import dayjs from 'dayjs'
import localizedFormat from 'dayjs/plugin/localizedFormat'

dayjs.extend(localizedFormat)

export default Vue.extend({
  name: 'VideoPreview',

  props: {
    video: {
      type: Object,
      default: () => {
        return {}
      },
      required: true,
    },
  },

  computed: {
    url() {
      return `https://www.youtube.com/watch?v=${this.video.contentDetails.videoId}`
    },
    publishedHuman() {
      return dayjs(this.video.snippet.publishedAt).format('L')
    },
    publishedDatetime() {
      return dayjs(this.video.snippet.publishedAt).format('YYYY-MM-DD')
    },
  },
})
</script>
