---
// Cspell:words astro frontmatter
import Pullquote from '../components/Pullquote.astro';
import Image from '../components/Image.astro';
import PageTitle from '../components/PageTitle.astro';

import GridLayout from './GridLayout.astro';

export interface Props {
	class?: string;
	frontmatter?: any;
	grid?: 'wide' | 'narrow';
}

const { frontmatter, class: className, grid = 'narrow' } = Astro.props;
const gridVariant = frontmatter.grid || grid;
---

<GridLayout grid={gridVariant} class={className} {...frontmatter}>
	<PageTitle slot="title" grid={gridVariant} {...frontmatter}>
		{frontmatter.title}
	</PageTitle>
	{
		frontmatter.cover && (
			<div
				slot="before-content"
				class="col-span-full xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"
			>
				<Image alt={frontmatter.title} src={frontmatter.cover} />
			</div>
		)
	}
	<slot name="before-content" />
	{
		frontmatter.intro && (
			<div class="mbe-10" {...animation}>
				<Pullquote alignment="left" text={frontmatter.intro} />
			</div>
		)
	}
	<slot />
	<slot name="after-content" />
</GridLayout>