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

	export interface ToolbarState {
		expanded: boolean;
		toggle: () => void;
	}

	interface Props {
		start?: Snippet<[ToolbarState]>;
		center?: Snippet<[ToolbarState]>;
		end?: Snippet<[ToolbarState]>;
		expansion?: Snippet;
		expand?: boolean;
	}

	let { start, center, end, expansion, expand: expand = false }: Props = $props();

	let expanded = $state(expand);

	function toggle() {
		expanded = !expanded;
	}
</script>

<div class="flex flex-col">
	<div
		class="flex flex-row flex-wrap gap-4 text-sm xl:grid xl:grid-flow-col xl:grid-cols-[1fr_2fr_1fr]"
	>
		<div class="flex flex-row justify-start gap-2">
			{@render start?.({ expanded, toggle })}
		</div>
		<div class="flex flex-row flex-wrap justify-start gap-2 xl:flex-nowrap xl:justify-center">
			{@render center?.({ expanded, toggle })}
		</div>
		<div class="flex flex-row justify-end gap-2">
			{@render end?.({ expanded, toggle })}
		</div>
	</div>
	{#if expanded}
		<div class="mt-4">
			{@render expansion?.()}
		</div>
	{/if}
</div>