---
import type { CollectionEntry } from "astro:content";

interface Props extends CollectionEntry<"blog"> {}

const { id, data } = Astro.props;
const { title, description, dateCreated, lang } = data;

const href = `/blog/read/${id}`;
---

<article>
  <h2>
    <a {href}>{title}</a>
  </h2>
  <p>{description}</p>
  <footer>
    <span><time datetime={(dateCreated as Date).toISOString()}>{
        new Intl.DateTimeFormat(lang, {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
          hour: "2-digit",
          minute: "2-digit",
          timeZoneName: "long",
        }).format(dateCreated)
      }</time></span>
  </footer>
</article>

<style>
  article {
    border-block-end: 1px solid #181818;
    padding-block-end: 1rem;
    margin-block: 0.5rem;
  }
</style>