---
import type { CollectionEntry } from 'astro:content';
import RootLayout from '../layouts/RootLayout.astro';
import FormattedDate from '../components/FormattedDate.astro';
import NotchedBox from '../components/NotchedBox.astro';
import { Image } from 'astro:assets';

type Props = CollectionEntry<'blog'>['data'] & { slug: string; };

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

<style>
  .byline {
    color: var(--color-gray);
  }
  .title {
    margin-top: 1em;

    h1 {
      margin: 0;
    }
  }
  .permalink {
    color: var(--color-gray);
    font-size: 80%;
  }

  .dt-published {
    font-size: var(--font-size-sm);
  }

  .tags {
    display: flex;
    flex-direction: row;
    gap: 16px;

    a {
      color: var(--color-gray);
    }
  }
</style>
<RootLayout title={title} description={description}>
  <NotchedBox fillNotches="left">
    <article class="h-entry">
      <div class="hero-image">
        {heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
      </div>
      <div class="prose">
        <div class="byline">
          <div>
            <time class="dt-published">{ pubDate && <FormattedDate date={pubDate} /> }</time>
            by
            <a class="p-author h-card u-url" href="https://www.blazestar.net">Periodic</a>
          </div>
          <div>
            <a class="permalink u-url" href={`https://blazestar.net/blog/${slug}`}>Permalink</a>
          </div>
          {
            updatedDate && (
              <div class="last-updated-on dt-updated">
                Last updated on <FormattedDate date={updatedDate} />
              </div>
            )
          }
        </div>
        <div class="title">
          <h1 class="p-name">{title}</h1>
        </div>
        { tags &&
          <div class="tags">
            {
              tags.map(tag =>
                <a href={`/blog/tag/${tag}`} >#{tag}</a>
              )
            }
          </div>
        }
        <hr />
        <div class="e-content">
          <slot />
        </div>
      </div>
    </article>
  </NotchedBox>
</RootLayout>