---
import type { CollectionEntry } from 'astro:content';

interface Props {
  post: CollectionEntry<'blog'>;
}

const { post } = Astro.props;
const { title, excerpt, date, author, category, categories, image, featuredImage } = post.data;

// Support both 'category' and 'categories' field names
const postCategory = category || (Array.isArray(categories) ? categories[0] : 'ทั่วไป');
// Support both 'image' and 'featuredImage' field names
const postImage = image || featuredImage || '/images/2021/03/ppr-pipe_000C.jpg';
---

<a href={`/blog/${post.slug}`} class="card group">
  <div class="relative aspect-video bg-secondary-100 overflow-hidden">
    <img
      src={postImage}
      alt={title}
      class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
      loading="lazy"
    />
    <div class="absolute top-4 left-4">
      <span class="industrial-badge">{postCategory}</span>
    </div>
  </div>
  <div class="p-6">
    <time class="text-sm text-secondary-500">
      {new Date(date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
    </time>
    
    <h3 class="mt-2 text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors line-clamp-2">
      {title}
    </h3>
    
    {excerpt && (
      <p class="mt-3 text-secondary-600 text-sm line-clamp-3">
        {excerpt}
      </p>
    )}
    
    <div class="mt-4 flex items-center text-primary-600 font-medium">
      <span>อ่านต่อ</span>
      <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
      </svg>
    </div>
  </div>
</a>