<script lang="ts">
	import type { Snippet } from "svelte";
	import Separator from "#lib/components/ui/Separator.svelte";
	import { toLines } from "#lib/components/settings/descriptionLines.ts";

	interface Props {
		title?: string;
		titleSize?: "regular" | "large";
		description?: string | string[];
		action?: Snippet;
		separator?: boolean;
		children?: Snippet;
	}

	let {
		title,
		titleSize = "regular",
		description,
		action,
		separator = false,
		children
	}: Props = $props();

	const lines = $derived(toLines(description));
</script>

<div class="flex w-full flex-col gap-md">
	{#if title || lines.length > 0 || action}
		<div
			class="flex w-full flex-col gap-xs sm:flex-row sm:items-end sm:justify-between sm:gap-5xl"
		>
			<div class="flex min-w-0 flex-col">
				{#if title}
					<span
						data-testid="settingsBlockTitle"
						class="{titleSize === 'large'
							? 'typography-paragraph-large'
							: 'typography-paragraph-regular'} text-foreground-default"
					>
						{title}
					</span>
				{/if}
				{#each lines as line (line)}
					<p
						data-testid="settingsBlockDescription"
						class="typography-paragraph-regular text-foreground-muted"
					>
						{line}
					</p>
				{/each}
			</div>
			{#if action}
				<div class="flex shrink-0 items-center gap-xs self-end sm:self-auto">
					{@render action()}
				</div>
			{/if}
		</div>
	{/if}
	{#if separator}
		<Separator />
	{/if}
	{#if children}
		{@render children()}
	{/if}
</div>