<script setup>
defineProps({
  post: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <article class="post-card site-section site-panel-hover group">
    <div class="post-card__body site-section-body flex gap-4">
      <PostCardMedia
        :to="post.to"
        :title="post.title"
        :featured-image="post.featuredImage"
        link-class="h-20 w-36 shrink-0"
        aspect-class="h-full w-full"
      />
      <div class="post-card__content min-w-0">
        <h2 class="post-card__title text-base font-semibold leading-tight">
          <NuxtLink class="post-card__title-link site-interactive hover:opacity-70" :to="post.to">
            {{ post.title }}
          </NuxtLink>
        </h2>
        <p
          v-if="post.excerpt"
          class="post-card__excerpt post-summary-clamp post-summary-clamp--two mt-2 text-sm leading-6 site-muted"
        >
          {{ post.excerpt }}
        </p>
        <p class="post-card__meta mt-2 text-xs site-muted">
          {{ post.publishedAt }}<template v-if="post.tag"> / {{ post.tag }}</template>
        </p>
      </div>
    </div>
  </article>
</template>
