---
import RailLayout from "./RailLayout.astro";

interface Props {
  title: string;
  description: string;
  date: Date;
  author: string;
  authorHandle: string;
  authorRole: string;
  authorAvatar: string;
}

const { title, description, date, author, authorHandle, authorRole, authorAvatar } =
  Astro.props;

const authorX = `https://x.com/${authorHandle}`;

const formattedDate = date.toLocaleDateString("en-US", {
  year: "numeric",
  month: "long",
  day: "numeric",
  // Frontmatter dates are bare YYYY-MM-DD (parsed as UTC midnight); format in
  // UTC so the displayed day matches the date the author wrote, regardless of
  // the build/runtime timezone.
  timeZone: "UTC",
});
const isoDate = date.toISOString();
---

<RailLayout title={`${title} — Executor`} description={description} current="blog">
  <article class="doc">
    <header class="doc__intro doc__intro--post">
      <a href="/blog" class="doc__crumb">← Writing</a>
      <h1 class="doc__title">{title}</h1>
      <p class="doc__lede">{description}</p>
      <a href={authorX} target="_blank" rel="noopener noreferrer" class="doc__sig doc__sig--post">
        <img src={authorAvatar} alt="" width="40" height="40" loading="lazy" />
        <span class="doc__sig-b">
          <strong>{author}</strong>
          <span>{authorRole} · <time datetime={isoDate}>{formattedDate}</time></span>
        </span>
      </a>
    </header>

    <div class="blog-prose doc__prose">
      <slot />
    </div>

    <section class="doc__section">
      <p class="doc__quiet-p">
        <a href="/blog">More writing</a> · <a href="/">Back to Executor</a>
      </p>
    </section>
  </article>
</RailLayout>