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

	interface Props {
		/** destructive escape hatch that sits opposite the confirm pair, as on the
		 *  avatar screen's "Remove avatar" */
		start?: Snippet;
		children: Snippet;
	}

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

<div class="flex w-full items-start gap-2 {start ? 'justify-between' : 'justify-end'}">
	{#if start}
		<div class="flex items-center gap-2">{@render start()}</div>
	{/if}
	<div class="flex items-center gap-2">{@render children()}</div>
</div>
