<script lang="ts">
	import TraitPanel from './TraitPanel.svelte';

	interface Props {
		name: string;
		config: Record<string, unknown>;
	}

	let { name, config }: Props = $props();

	const configKeys = $derived(Object.keys(config));
</script>

<TraitPanel {name} label={name}>
	{#snippet children()}
		{#if configKeys.length > 0}
			<dl class="space-y-1 text-sm">
				{#each configKeys as key (key)}
					<div class="flex gap-2">
						<dt class="text-xs text-gray-500">{key}:</dt>
						<dd class="text-xs text-gray-700">{JSON.stringify(config[key])}</dd>
					</div>
				{/each}
			</dl>
		{:else}
			<p class="text-xs text-gray-400">Aktivert, ingen konfigurasjon.</p>
		{/if}
	{/snippet}
</TraitPanel>
