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

type Props = CollectionEntry<'blog'>['data'];

const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---

<Base title={title} description={description}>
  <article class="max-w-3xl mx-auto">
    {heroImage && (
      <img class="w-full rounded-xl mb-6 object-cover" style="max-height: 400px" src={heroImage} alt="" />
    )}
    <div class="mb-6 pb-4 border-b" style="border-color: var(--border)">
      <div class="text-sm mb-2" style="color: var(--text-4)">
        <FormattedDate date={pubDate} />
        {updatedDate && (
          <span class="italic"> · Updated <FormattedDate date={updatedDate} /></span>
        )}
      </div>
      <h1 class="text-3xl font-bold" style="color: var(--text-primary)">{title}</h1>
    </div>
    <div class="prose-wiki">
      <slot />
    </div>
  </article>
</Base>
