---
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}>
		<main>
      <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>
		</main>
</RootLayout>
