<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'

import { getFormattedPeriod } from 'src/utilities/dom'
import type { ProjectListingInfo } from './project'
import { getCurrentRoute } from 'src/utilities/vuetils'

const props = defineProps<{
  id: string
  info: ProjectListingInfo
}>()

const currentRoute = getCurrentRoute()

const { thumbnailBackground, thumbnailBackgroundSize } = props.info
const period = computed(() => (!!props.info.period
  ? getFormattedPeriod(props.info.period)
  : undefined
))
const caption = computed(() => marked.parse(props.info.caption || ''))
const summary = computed(() => marked.parse(props.info.summary || ''))
const title = computed(() => marked.parse(props.info.title || ''))
</script>

<template lang="pug">
.project-embed
  router-link.link(
    :to='{ name: `${currentRoute.name}: View Project`, query: { id: id } }'
    :href='`./view?id=${id}`'
    :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
  )
    .text
      .title(
        v-html='title'
      )
      p.period(
        v-if='period'
      ) {{ period }}
  .caption(
    v-html='caption'
  )
  .summary(
    v-html='summary'
  )
</template>

<style scoped lang="sass">

</style>