---
import General from "@layouts/General.astro";
import Time from "@components/Time.tsx";
import { type CollectionEntry } from "astro:content";
interface Props {
  post: CollectionEntry<"blog">;
}
const { post } = Astro.props;
const { title, pubDate, tags } = post.data;
const tagCount = tags.length;
---

<General title={title}>
  <div class="max-w-3xl mx-4">
    <h1>
      <a href={post.slug}>
        {title}
      </a>
    </h1>
    <p class="mt-0 text-sm ml-5">
      <Time time={pubDate} client:load />
      <span class="ml-1 space-x-2">
        {
          tags.map((tag, i) =>
            // Ignore required due to whitespace sensitive content
            // prettier-ignore
            <><a href={`/tags/${tag}`}>{tag}</a>{i < tagCount - 1 ? "," : ""}</>,
          )
        }
      </span>
      <article>
        <slot />
      </article>
    </p>
  </div>
  <hr />
</General>