---
import PageSidebar from "@astrojs/starlight/components/PageSidebar.astro";
import Pattern from "../components/PostCard.astro";

interface Props {
  title: string;
  pubDate: Date;
  author: {
    name: string;
    image: string;
  };
  tags?: string[];
}

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

<Pattern
  title={title}
  date={pubDate}
  author={author}
  tags={tags}
  style="post"
/>

<div
  class="flex flex-col lg:flex-row max-w-7xl mx-auto px-4 lg:px-8 lg:py-10 py-4"
>
  <aside class="hidden lg:block lg:w-1/5 pr-4"></aside>

  <main class="w-full lg:w-3/5 max-w-none py-4">
    <article>
      <slot />
    </article>
  </main>

  <aside class="hidden lg:block lg:w-1/5 pl-4">
    <div class="sticky top-20">
      <PageSidebar />
    </div>
  </aside>
</div>

<style is:global>
  @reference "#/styles/global.css";

  .prose p > img {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .prose p > img[alt="Architecture diagram"] {
    max-width: 450px;
  }

  figure:not(.is-terminal) code {
    counter-reset: step;
    counter-increment: step 0;
  }

  figure:not(.is-terminal) code .ec-line::before {
    content: counter(step);
    counter-increment: step;
    width: 2rem;
    margin-right: 0rem;
    display: inline-block;
    text-align: right;
    color: rgba(115, 138, 148, 0.4);
  }
</style>
