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

	interface Props {
		/** Figma uses 16px on General's label blocks and 14px on Access/Pipelines */
		title?: string;
		titleSize?: "regular" | "large";
		/** muted copy under the title; pass an array to get one line each */
		description?: string | string[];
		/** trailing action, bottom-aligned against the description */
		action?: Snippet;
		/** the hairline between the header and the content */
		separator?: boolean;
		children?: Snippet;
	}

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

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

<div class="flex w-full flex-col gap-4">
	{#if title || lines.length > 0 || action}
		<!-- the action sits on the last line of the description, not its middle — until
		     the description needs the whole phone width, where it drops below instead -->
		<div class="flex w-full flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-16">
			<div class="flex min-w-0 flex-col">
				{#if title}
					<span
						class="{titleSize === 'large'
							? 'typography-paragraph-large'
							: 'typography-paragraph-regular'} text-foreground-default"
					>
						{title}
					</span>
				{/if}
				{#each lines as line (line)}
					<p class="typography-paragraph-regular text-foreground-muted">{line}</p>
				{/each}
			</div>
			{#if action}
				<div class="flex shrink-0 items-center gap-2 self-end sm:self-auto">
					{@render action()}
				</div>
			{/if}
		</div>
	{/if}
	{#if separator}
		<hr class="w-full border-0 border-t border-border-default" />
	{/if}
	{#if children}
		{@render children()}
	{/if}
</div>
