<template>
  <NuxtLink :to="link" :external="isExternal" :target="isExternal ? '_blank' : '_self'" 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" :img="author.img" :date="date"/>
      </footer>
    </div>
  </NuxtLink>
</template>

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

const { link } = defineProps<BlogCard>()

const isExternal = computed(() => link.startsWith('http'))
</script>