<template>
  <NuxtLink :to="link" class="BlogCard z-2">
    <div class="image">
      <img :src="image" alt=" " aria-hidden="true"/>
    </div>
    <div class="card-content">
      <header>
        <span class="chip"><BlogCategory :name="category"/></span>
        <h2>{{ title }}</h2>
      </header>
      <main>
        <p>
          {{ description }}
        </p>
      </main>
      <footer>
        <BlogAuthor :name="author.name" :date="date"/>
      </footer>
    </div>
  </NuxtLink>
</template>

<script setup lang="ts">
import type { Category } from './types'

type Props = {
  title: string
  description: string
  image: string
  date: string
  link: string
  category: Category
  author: {
    name: string
  }
}

defineProps<Props>()

</script>