<template>
  <div class="related-header">Bài viết liên quan 📚</div>
  <section v-for="(item, index) in data" :key="index">
    <div v-for="(subItem, subIndex) in item.data" :key="subIndex" class="item">
      <RouterLink :to="subItem.path">
        <p class="title">
          {{ subItem.info.title }}
        </p>
        <p v-if="subItem.info.subtitle" class="subtitle">
          {{ subItem.info.subtitle }}
        </p>
      </RouterLink>
      <hr class ="hr1"/>
    </div>
  </section>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type { GungnirThemePostData } from "../../shared";

defineProps({
  data: {
    type: Array as PropType<
      Array<{ year: string; data: GungnirThemePostData[] }>
    >,
    default: () => []
  }
});
</script>
