---
/**
 * ArticleCard - Blog article card component
 * Displays featured image, title, excerpt, category badge, and published date
 */

interface Category {
  id: string
  title: string
  slug: string
  backgroundColor?: string
  textColor?: string
}

interface PostImage {
  url: string
  alt?: string
}

interface Props {
  post: {
    id: string
    title: string
    slug: string
    heroImage?: PostImage | null
    excerpt?: string | null
    categories?: Category[] | null
    publishedAt?: string | null
    createdAt?: string | null
  }
}

const { post } = Astro.props

// Format date in Traditional Chinese
const formatDate = (dateStr: string | null | undefined) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-TW', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// Get primary category (first one)
const category = post.categories?.[0]

// Generate image URL with fallback
const imageUrl = post.heroImage?.url || '/placeholder-blog.jpg'
const imageAlt = post.heroImage?.alt || post.title
const displayDate = post.publishedAt || post.createdAt
---

<a href={`/xing-xiao-fang-da-jing/${post.slug}`} class="block no-underline text-inherit group">
  <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 h-full flex flex-col group-hover:-translate-y-1">
    <!-- Featured Image -->
    <div class="aspect-video overflow-hidden bg-[var(--color-gray-100)]">
      <img
        src={imageUrl}
        alt={imageAlt}
        loading="lazy"
        class="w-full h-full object-cover transition-transform duration-400 group-hover:scale-105"
        width="800"
        height="450"
      />
    </div>

    <!-- Card Content -->
    <div class="p-6 md:p-5 flex flex-col flex-1">
      <!-- Category Badge -->
      {
        category && (
          <span
            class="inline-block px-3 py-1.5 rounded-3xl text-[0.8125rem] font-semibold mb-3 self-start"
            style={`background-color: ${category.backgroundColor || 'var(--color-enchunblue)'}; color: ${category.textColor || '#fff'}`}
          >
            {category.title}
          </span>
        )
      }

      <!-- Title -->
      <h3 class="font-['Noto_Sans_TC'] text-xl md:text-lg font-bold text-[var(--color-dark-blue)] leading-snug mb-3 line-clamp-2">
        {post.title}
      </h3>

      <!-- Excerpt -->
      {
        post.excerpt && (
          <p class="font-['Noto_Sans_TC'] text-[0.9375rem] md:text-sm text-[var(--color-gray-600)] leading-relaxed mb-4 line-clamp-2 flex-1">
            {post.excerpt.length > 150 ? post.excerpt.slice(0, 150) + '...' : post.excerpt}
          </p>
        )
      }

      <!-- Published Date -->
      {
        displayDate && (
          <time class="font-['Quicksand','Noto_Sans_TC'] text-sm text-[var(--color-gray-500)] mt-auto" datetime={displayDate}>
            {formatDate(displayDate)}
          </time>
        )
      }
    </div>
  </div>
</a>
