---
/**
 * MOREMINIMORE - BLOG CARD COMPONENT (LIGHT THEME)
 */

interface Props {
  title: string;
  excerpt: string;
  image?: string;
  date: Date;
  slug: string;
  category: string;
}

const { title, excerpt, image, date, slug, category } = Astro.props;
const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month: 'short', day: 'numeric' });
---

<a href={`/blog/${slug}`} class="blog-card">
  <div class="blog-image">
    {image && <img src={image} alt={title} loading="lazy" />}
  </div>
  <div class="blog-content">
    <span class="blog-category">{category}</span>
    <h3 class="blog-title">{title}</h3>
    <p class="blog-excerpt">{excerpt}</p>
    <div class="blog-footer">
      <span class="blog-date">{formattedDate}</span>
      <span class="blog-link">อ่านต่อ →</span>
    </div>
  </div>
</a>

<style>
  .blog-card {
    display: block;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    transition: all 0.3s var(--ease-out-expo);
  }

  .blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
  }

  .blog-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-bg-soft);
  }

  .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .blog-card:hover .blog-image img {
    transform: scale(1.05);
  }

  .blog-content {
    padding: 24px;
  }

  .blog-category {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }

  .blog-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog-excerpt {
    font-size: 14px;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .blog-date {
    font-size: 12px;
    color: var(--color-gray-500);
  }

  .blog-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
    transition: color 0.3s ease;
  }

  .blog-card:hover .blog-link {
    color: var(--color-primary-dark);
  }
</style>
