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

<template>
  <article class="post-card site-section">
    <div class="post-card__body site-section-body flex gap-4">
      <img
        v-if="post.featuredImage"
        class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-surface object-cover"
        :src="post.featuredImage"
        :alt="post.title"
        loading="lazy"
      >
      <div v-else class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-[linear-gradient(135deg,#06333a,#f4a261)]" />
      <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 hover:opacity-70" :to="post.to">
            {{ post.title }}
          </NuxtLink>
        </h2>
        <p class="post-card__excerpt mt-2 text-sm leading-6 site-muted">
          {{ post.excerpt }}
        </p>
        <p class="post-card__meta mt-2 text-xs site-muted">
          {{ post.publishedAt }} / {{ post.tag }}
        </p>
      </div>
    </div>
  </article>
</template>
