<script lang="ts">
	import type { Snippet } from "svelte";
	import Separator from "#lib/components/ui/Separator.svelte";

	interface Props {
		start?: Snippet;
		end?: Snippet;
		separator?: boolean;
	}

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

<div class="flex min-h-8 w-full items-center gap-md {start ? 'justify-between' : 'justify-end'}">
	{#if start}
		{@render start()}
	{/if}
	{#if end}
		<div class="flex items-center gap-xs">{@render end()}</div>
	{/if}
</div>
{#if separator}
	<Separator />
{/if}