<script lang="ts">
  import type { Post } from "$lib/utils/posts";

  interface Props {
    post: Post;
  }

  let { post }: Props = $props();

  function formatDate(dateStr: string): string {
    return new Date(dateStr).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  }
</script>

<article>
  <header>
    <a href="/posts/{post.slug}">
      <h1 style="text-decoration: none;">{post.title}</h1>
    </a>
    <small><time datetime={post.date}>{formatDate(post.date)}</time></small>
  </header>
  <p>{post.description}</p>
</article>
