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

	interface Props {
		icon?: Component<SvelteHTMLElements["svg"]>;
		title: string;
		/** badges rendered inline after the title */
		tags?: Snippet;
		/** secondary lines under the title — fingerprints, "added 2 months ago" */
		meta?: Snippet;
		/** trailing buttons */
		actions?: Snippet;
	}

	let { icon, title, tags, meta, actions }: Props = $props();

	const Glyph = $derived(icon);
</script>

<!-- The meta lines — fingerprints, URLs — need the full width of a phone, so the
     trailing buttons drop under them and stay left-aligned with the title. -->
<div
	class="flex min-h-8 w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
>
	<div class="flex min-w-0 flex-col gap-1">
		<div 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>
			{#if tags}
				{@render tags()}
			{/if}
		</div>
		{#if meta}
			{@render meta()}
		{/if}
	</div>
	{#if actions}
		<div class="flex shrink-0 items-center gap-2 self-start sm:self-auto">{@render actions()}</div>
	{/if}
</div>
