---
import { type CollectionEntry } from "astro:content";
import BaseLayout from "./BaseLayout.astro";
import backgroundImage from "@assets/blog-bg.jpg";
import FormattedDate from "@components/FormattedDate.astro";
import { Image } from "astro:assets";

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

const { title, pubDate, image } = Astro.props;
---

<BaseLayout title={title} backgroundImage={backgroundImage}>
  <article>
    <header>
      <Image src={image} width="90" alt="Header pic" />
      <div>
        <h1 class="post-title">{title}</h1>
        <div class="date">
          <FormattedDate date={pubDate} />
        </div>
      </div>
    </header>
    <main class="post-content">
      <slot />
    </main>
  </article>
</BaseLayout>

<style>
  header {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1rem;
    font-style: italic;
    padding-bottom: 1rem;
  }

  .post-title {
    font-size: 35px;
    padding-bottom: 0.5rem;
  }

  .date {
    color: var(--text-color-light);
  }

  /* Revert the changes made by the global styles */
  /* So markdown can be spaced as the markdown processor says */
  .post-content {
    * {
      margin: revert;
      padding: revert;
    }
  }
</style>
