---
import BaseLayout from './BaseLayout.astro';
import FormattedDate from '../components/FormattedDate.astro';
import type { CollectionEntry } from 'astro:content';

interface Props {
  post: CollectionEntry<'blog'>['data'];
}
const { post } = Astro.props;
const { title, description, pubDate, updatedDate, tags } = post;
---

<BaseLayout title={title} description={description} type="article" width="narrow">
  <article class="prose">
    <header class="post-header">
      <h1>{title}</h1>
      <p class="post-meta">
        <FormattedDate date={pubDate} />
        {updatedDate && <span> · updated <FormattedDate date={updatedDate} /></span>}
      </p>
      {
        tags.length > 0 && (
          <ul class="chip-set">
            {tags.map((tag) => (
              <li>
                <a class="chip" href={`/tags/${tag}`}>#{tag}</a>
              </li>
            ))}
          </ul>
        )
      }
    </header>
    <slot />
  </article>
</BaseLayout>