PostCard.astro

---
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';

interface Props {
  title: string;
  subtitle?: string;
  slug: string;
  date: Date;
  description?: string;
  categories: string[];
  image?: ImageMetadata;
}

const { title, subtitle, slug, date, description, categories, image } = Astro.props;

const formattedDate = date.toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  timeZone: 'America/New_York'
});
---

<article class="bg-background-2 rounded-lg overflow-hidden hover:bg-background-3 transition-colors relative">
  {image && (
    <a href={`/${slug}/`} class="block aspect-video overflow-hidden">
      <Image
        src={image}
        alt={title}
        width={1920}
        height={1080}
        quality={80}
        format="webp"
        class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
        loading="lazy"
      />
    </a>
  )}
  <div class="p-6 min-h-[320px] pb-12">
    <div class="flex flex-wrap gap-2 mb-3">
      {categories.map(category => (
        <a
          href={`/category/${category.toLowerCase()}/`}
          class="text-xs bg-primary/20 text-primary px-2 py-1 rounded no-underline hover:bg-primary/30"
        >
          {category}
        </a>
      ))}
    </div>
    <h2 class="text-xl font-heading mb-1">
      <a href={`/${slug}/`} class="text-text hover:text-primary no-underline">
        {title}
      </a>
    </h2>
    {subtitle && (
      <p class="text-[#FFB833] text-sm mb-2">{subtitle}</p>
    )}
    {description && (
      <p class="text-text-muted text-sm mb-3 line-clamp-6">{description}</p>
    )}
    <time class="text-text-muted text-xs absolute bottom-6 right-6">{formattedDate}</time>
  </div>
</article>