<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	// Echoes the +layout.svelte container idiom: a centered, padded section
	// clamped to a max width (matches Figma node 35:791's single Content slot).
	export const scaffold = tv({
		base: "mx-auto w-full px-4 py-6",
		variants: {
			width: {
				lg: "max-w-screen-lg",
				xl: "max-w-screen-xl",
				full: "max-w-full"
			}
		},
		defaultVariants: {
			width: "lg"
		}
	});

	export type ScaffoldVariants = VariantProps<typeof scaffold>;
</script>

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

	interface Props {
		width?: ScaffoldVariants["width"];
		class?: string;
		children: Snippet;
	}

	let { width = "lg", class: className, children }: Props = $props();

	const classes = $derived(scaffold({ width, class: className }));
</script>

<div class={classes}>
	{@render children()}
</div>
