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

	type ColorScheme = 'primary' | 'secondary' | 'accent' | 'accent2';

	interface Props {
		title: string;
		colorScheme?: ColorScheme;
		children: Snippet;
	}

	let { title, colorScheme = 'primary', children }: Props = $props();

	const borderClasses: Record<ColorScheme, string> = {
		primary: 'border-primary-500/20',
		secondary: 'border-secondary-500/20',
		accent: 'border-accent-500/20',
		accent2: 'border-accent2-500/20'
	};

	const gradientClasses: Record<ColorScheme, string> = {
		primary: 'from-primary-500/10',
		secondary: 'from-secondary-500/10',
		accent: 'from-accent-500/10',
		accent2: 'from-accent2-500/10'
	};
</script>

<section
	class="overflow-hidden rounded-xl border bg-theme-card shadow-theme-md {borderClasses[
		colorScheme
	]}"
>
	<div
		class="border-b bg-linear-to-r to-transparent px-5 py-3 {borderClasses[
			colorScheme
		]} {gradientClasses[colorScheme]}"
	>
		<h3 class="text-lg font-semibold text-theme">{title}</h3>
	</div>
	<div class="px-5 py-5">
		{@render children()}
	</div>
</section>
