<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>

<div class="flex min-h-8 w-full items-center justify-between 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">{@render actions()}</div>
	{/if}
</div>
