---
// src/layouts/BlogPostLayout.astro
import BaseLayout from './BaseLayout.astro';

interface Props {
  title: string;
  publishDate: string;
}

const { title, publishDate } = Astro.props;
---

<BaseLayout title={title}>
  <p class="date">{publishDate}</p>
  <slot />
</BaseLayout>

<!-- src/pages/blog/my-first-post.astro -->
---
import BlogPostLayout from '../../layouts/BlogPostLayout.astro';
---

<BlogPostLayout title="My First Post" publishDate="2026-08-06">
  <p>This is the actual post content.</p>
</BlogPostLayout>

<!--
  Notes:
  - BlogPostLayout wraps BaseLayout directly, passing title straight
    through as a prop while adding its own publishDate chrome above
    its own <slot />.
  - The blog post page only ever interacts with BlogPostLayout — it
    has no idea BaseLayout exists underneath, the same kind of
    composition ordinary components use.
-->