<script>
	import { clearMessages } from '$lib/services/messages/messages';
	import { drawerStore } from '@skeletonlabs/skeleton';

	function handleClear() {
		clearMessages();
		drawerStore.close();
	}

	let buttons = [
		{
			label: 'clear Messages',
			handler: handleClear
		}
	];
</script>

<div class="flex flex-col items-start p-4">
	<h2 class="mb-4 font-bold h3">Actions</h2>

	{#each buttons as button}
		<button on:click={button.handler} class="btn variant-filled-secondary">
			{button.label}
		</button>
	{/each}
</div>
