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

	interface Props {
		/** left-hand actions — omit and the trailing actions stay flush right */
		start?: Snippet;
		end?: Snippet;
		/** the hairline under the toolbar, drawn in every Figma tab that has one */
		separator?: boolean;
	}

	let { start, end, separator = true }: Props = $props();
</script>

<div class="flex min-h-8 w-full items-center gap-4 {start ? 'justify-between' : 'justify-end'}">
	{#if start}
		{@render start()}
	{/if}
	{#if end}
		<div class="flex items-center gap-2">{@render end()}</div>
	{/if}
</div>
{#if separator}
	<hr class="w-full border-0 border-t border-border-default" />
{/if}
