---
interface Props {
  id: string;
  date: Date;
  title: string;
  description: string;
}

const { id, date, title, description } = Astro.props;
---

<a href={`/posts/${id}`}>
  <div class="rounded-lg p-4 bg-zinc-800">
    <div class="flex items-center text-zinc-400 text-sm mb-2">
      {
        date.toLocaleDateString("en-US", {
          year: "numeric",
          month: "long",
          day: "numeric",
        })
      }
    </div>
    <h2 class="text-2xl font-semibold mb-1">{title}</h2>
    <p class="text-base text-zinc-400">{description}</p>
  </div>
</a>