<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { marked } from 'marked'
import { getFormattedDate } from 'src/utilities/parse'
import type { 
  ArticleEntry,
} from '@goldenwere/mackenzii-types'

const props = defineProps<{
  id: string,
  viewPath: string,
  isInternal: boolean,
  entry: Promise<ArticleEntry>
}>()

const resolved = ref({} as ArticleEntry)
const thumbnail = computed(() => resolved.value.thumbnail)
const description = computed(() => marked.parse(resolved.value.description || ''))
const date = computed(() => !!resolved.value.date ? getFormattedDate(resolved.value.date) : null)
const title = computed(() => marked.parse(resolved.value.title || props.id))
const href = computed(() => `${props.viewPath}?id=${props.id}`)

onMounted(async () => {
  resolved.value = await props.entry
})
</script>

<template lang="pug">
mixin link
  router-link.router-link.link(
    v-if='isInternal'
    :to='{ path: viewPath, query: { id: id } }'
  )
    block
  a.link(
    v-else
    :href='href'
  )
    block
mixin embedText
  .text
    .title(
      v-html='title'
    )
    .date(
      v-if='date'
    )
      span {{ date }}
.article-embed
  .thumbnail-wrapper(
    v-if='!!thumbnail'
  )
    +link
      .thumbnail(
        :style='thumbnail.style'
      )
  .text-wrapper
    +link
      +embedText
  .description(
    v-html='description'
  )
</template>

<style scoped lang="sass">
.thumbnail-wrapper
  .link,
  .link .thumbnail
    height: 100%
    width: 100%
    display: block
</style>

