<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		children: Snippet;
		/** full = lebar penuh, form = kiri dengan max lebar form, narrow = kiri max 3xl */
		variant?: 'full' | 'form' | 'narrow';
		class?: string;
	}

	let { children, variant = 'full', class: className = '' }: Props = $props();

	const variantClass = {
		full: 'page-content',
		form: 'page-content-form',
		narrow: 'page-content-narrow'
	}[variant];
</script>

<main class="{variantClass} {className}">
	{@render children()}
</main>
