<template>
  <div class="post-item">
    <div class="post-item__img" @click="$router.push(item.path)">
      <img :src="withBase(item.info.headerImage)" :alt="item.info.title"/>
    </div>
    <RouterLink :to="item.path" class="post-item__title">
    <div class="else">
      
        <h2>
          {{ item.info.title }}
        </h2>
        <p class="post-item__date">
        <span>🗓️&ensp;{{ item.info.date ? formateDateString(item.info.date) : "" }}</span>
      </p>
        <h3 v-if="item.info.subtitle">
          <span>📖&ensp;{{ item.info.subtitle }}</span>
        </h3>    
    </div>
  </RouterLink>
  </div>
</template>

<script setup lang="ts">
import { withBase } from "@vuepress/client";
import type { PropType } from "vue";
import type { GungnirThemePostData } from "../../shared";
import { formateDateString } from "../utils";

defineProps({
  item: {
    type: Object as PropType<GungnirThemePostData>,
    required: true
  }
});

</script>
