<script setup lang="ts">
import type { ArticleMetadata } from "@/interfaces";
import { simpleDateFormat } from "@lib/dates";
import { PUBLISHED_ON } from "@lib/config";
import ArticleTagList from "@/components/ArticleTagList.vue";

defineProps<{ metadata: ArticleMetadata }>();
</script>

<template>
  <RouterLink :to="metadata.path" class="h-entry">
    <h2 class="p-name" v-html="metadata.title"></h2>
    <span class="article-info">
      <span v-html="PUBLISHED_ON"></span>
      &hairsp;
      <time class="dt-published" :datetime="simpleDateFormat(metadata.date)">
        {{ simpleDateFormat(metadata.date) }}
      </time>
      <template v-if="metadata.tags.length > 0">
        —
        <article-tag-list :tags="metadata.tags" />
      </template>
    </span>
    <img v-if="metadata.thumbnail" alt="thumbnail" :src="metadata.path + metadata.thumbnail" />
  </RouterLink>
</template>
