<script lang="ts">
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";

	interface Props {
		/** plain-text label — omit and render whatever you need through `label` */
		title?: string;
		/** muted explanation under the title; pass an array to get one line each */
		description?: string | string[];
		icon?: Component<SvelteHTMLElements["svg"]>;
		/** replaces `title`/`icon` when the leading side is more than a label */
		label?: Snippet;
		/** trailing controls: buttons, toggles, code chips */
		children?: Snippet;
		/** top-align the control instead of centring it, for tall right-hand content */
		align?: "center" | "start";
		class?: string;
	}

	let {
		title,
		description,
		icon,
		label,
		children,
		align = "center",
		class: className
	}: Props = $props();

	const Glyph = $derived(icon);
	const lines = $derived(
		description === undefined ? [] : Array.isArray(description) ? description : [description]
	);
</script>

<div
	class="flex min-h-8 w-full justify-between gap-4 {align === 'start'
		? 'items-start'
		: 'items-center'} {className ?? ''}"
>
	{#if label}
		{@render label()}
	{:else}
		<span class="flex min-w-0 flex-col">
			<span class="flex items-center gap-2">
				{#if Glyph}
					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
				{/if}
				<span class="typography-paragraph-regular text-foreground-default">{title}</span>
			</span>
			{#each lines as line (line)}
				<span class="typography-paragraph-regular text-foreground-muted">{line}</span>
			{/each}
		</span>
	{/if}
	{#if children}
		<div class="flex shrink-0 items-center gap-2">{@render children()}</div>
	{/if}
</div>
