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

	type Props = {
		name: Snippet | string;
		description?: Snippet | string;
		control: Snippet;
	};

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

	const descriptionLines = $derived(
		typeof description === "string" ? description.split("\n") : [],
	);
</script>

<div class="setting-item">
	<div class="setting-item-info">
		<div class="setting-item-name">
			{#if typeof name === "string"}
				{name}
			{:else}
				{@render name()}
			{/if}
		</div>
		{#if description}
			<div class="setting-item-description">
				{#if typeof description === "string"}
					{#each descriptionLines as line}
						<div>{line}</div>
					{/each}
				{:else}
					{@render description()}
				{/if}
			</div>
		{/if}
	</div>
	<div class="setting-item-control">{@render control()}</div>
</div>
