---
interface Props {
  title: string;
  excerpt: string;
  date: string;
  category: string;
  image: string;
  url: string;
  readTime?: string;
}

const { 
  title, 
  excerpt, 
  date, 
  category, 
  image, 
  url, 
  readTime = "5 min read" 
} = Astro.props;
---

<article class="post-card">
  <a href={url} aria-label={`Read more about ${title}`}>
    <img src={image} alt="" class="post-image" width="720" height="360" loading="lazy" /> {/* Added alt="", loading */}
  </a>
  <div class="post-content">
    <div class="post-meta">
      <span class="post-date">{date}</span>
      {category && <span class="post-category">{category}</span>}
    </div>
    <h3 class="post-title">
      <a href={url}>{title}</a>
    </h3>
    <p class="post-excerpt">
      {excerpt}
    </p>
    <div class="post-footer">
      <span class="post-read-time">{readTime}</span>
      <a href={url} class="read-more">Read More</a>
    </div>
  </div>
</article>

<style>
  /* Styles are in global.css */
  .post-card a:has(img) { /* Ensure image link covers image */
    display: block;
  }
  .post-image {
     background-color: var(--bg-secondary); /* Add bg color for loading */
  }
</style>