---
import type { ComponentProps } from 'astro/types';
import Base from './Base.astro';

type Props = Omit<ComponentProps<typeof Base>, 'title'> & {
  title: string;
  fullWidth?: boolean;
};

const { title, description, fullWidth } = Astro.props;
if (!title) {
  throw new Error('Page layout requires a `title` prop.');
}
---

<Base {...Astro.props}>
  <div class:list={['page-shell', fullWidth && 'page-shell--full-width']}>
    <header class="page-header">
      <slot name="breadcrumbs" />
      <h1>{title}</h1>
      {description && <p>{description}</p>}
    </header>
    <slot />
  </div>
</Base>
