<script setup>
const props = defineProps({
  /** 게시물 링크 */
  to: {
    type: String,
    required: true
  },
  /** 게시물 제목 */
  title: {
    type: String,
    required: true
  },
  /** 대표 이미지 URL */
  featuredImage: {
    type: String,
    default: ''
  },
  /** 목록 표시용 대표 이미지 썸네일 URL */
  thumbnailImage: {
    type: String,
    default: ''
  },
  /** 썸네일 비율·크기 Tailwind 클래스 */
  aspectClass: {
    type: String,
    default: 'aspect-square sm:aspect-video'
  },
  /** 링크 래퍼 추가 클래스 */
  linkClass: {
    type: String,
    default: ''
  },
  /** 이미지 추가 클래스 */
  imageClass: {
    type: String,
    default: ''
  }
})

const displayImage = computed(() => props.thumbnailImage || props.featuredImage)
</script>

<template>
  <NuxtLink
    :to="to"
    class="post-card-media relative block"
    :class="linkClass"
    data-post-card-media
  >
    <figure class="post-card-media__figure overflow-hidden rounded-[10px]">
      <img
        v-if="displayImage"
        class="post-card-media__image w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90"
        :class="[aspectClass, imageClass]"
        :src="displayImage"
        :alt="title"
        loading="lazy"
      >
      <span
        v-else
        class="post-card-media__placeholder flex w-full items-center justify-center rounded-[inherit] bg-[#F7F4EF] p-4 text-center text-xs leading-snug text-[var(--site-muted)] transition-opacity duration-200 group-hover:opacity-90"
        :class="aspectClass"
        :aria-label="title"
      >
        <span class="post-card-media__placeholder-text max-w-full break-words line-clamp-3 sm:line-clamp-4">{{ title }}</span>
      </span>
    </figure>
  </NuxtLink>
</template>
