<script lang="ts">
	/**
	 * Generic wrapper for trait panels.
	 * Provides consistent styling and a header with trait name.
	 */
	interface Props {
		name: string;
		label: string;
		icon?: string;
		children?: import('svelte').Snippet;
	}

	let { name, label, icon, children }: Props = $props();
</script>

<section class="rounded-lg border border-gray-200 bg-white shadow-sm" data-trait={name}>
	<div class="flex items-center gap-2 border-b border-gray-100 px-4 py-3">
		{#if icon}
			<span class="text-lg" aria-hidden="true">{icon}</span>
		{/if}
		<h3 class="text-sm font-semibold text-gray-700">{label}</h3>
	</div>
	<div class="p-4">
		{#if children}
			{@render children()}
		{:else}
			<p class="text-sm text-gray-400">Ingen innhold ennå.</p>
		{/if}
	</div>
</section>
