---
import cx from 'classnames';

import { Title } from './Title';

export interface Props {
	class?: string;
	grid?: 'wide' | 'narrow';
	innerGrid?: boolean;
}

const { class: className, grid = 'narrow', innerGrid } = Astro.props;
const titleClasses = cx(
	'col-start-2 col-end-18 !mbe-0',
	{
		'md:col-start-3 md:col-end-17': grid === 'wide',
		'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': grid === 'narrow',
		'!col-start-1 row-start-1': innerGrid,
	},
	className
);
---

<Title class={titleClasses}>
	<slot />
</Title>
