<script lang="ts">
	import type { Snippet } from 'svelte';
	import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
	import { hexToRgba } from '$lib/utils/colors';
	import { themeStore } from '$lib/stores/theme.svelte';

	let {
		children,
		maxWidth = '6xl',
		theme = null,
		themeColor = null
	}: {
		children: Snippet;
		maxWidth?: string;
		theme?: string | null;
		themeColor?: string | null;
	} = $props();

	const backgroundStyle = $derived.by(() => {
		if (!themeColor) return '';

		const isDark = themeStore.getResolvedTheme() === 'dark';
		const tintedColor = hexToRgba(themeColor, 0.15);

		return isDark
			? `background: linear-gradient(${tintedColor}, ${tintedColor}), #000000;`
			: `background-color: ${tintedColor};`;
	});
</script>

<div class="min-h-screen p-4 md:p-8 relative overflow-hidden" style={backgroundStyle}>
	<ThemeBackground themeName={theme} color={themeColor} />
	<div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
		{@render children()}
	</div>
</div>
