<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;
		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;
		class?: string;
	}

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

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

<div class="flex min-h-8 w-full items-center justify-between gap-4 {className ?? ''}">
	{#if label}
		{@render label()}
	{:else}
		<span class="flex min-w-0 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>
	{/if}
	{#if children}
		<div class="flex shrink-0 items-center gap-2">{@render children()}</div>
	{/if}
</div>
