<template>
  <NuxtLink :to="link" class="BlogCard z-2">
    <img :src="image" alt=" " aria-hidden="true" />
    <div class="card-content">
      <header>
        <span class="chip">{{ category }}</span>
        <h2>{{ title }}</h2>
        <small>{{ description }}</small>
      </header>
      <main>
        <ContentRenderer :value="excerpt" />
      </main>
      <footer>
        <BlogAuthor :name="author.name" :image="author.image" :date="date" />
        <div class="tags">
          <span>tags</span>
          <span class="tag" v-for="tag in tags">{{tag}}</span>
        </div>
      </footer>
    </div>
  </NuxtLink>
</template>

<script setup lang="ts">
type Props = {
  title : string
  description : string
  image : string
  date : string
  excerpt : { type: string, children?: any }
  link : string
  tags : string[]
  category : string
  author : {
    name : string
    image : string
  }
}

defineProps<Props>()

</script>