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

	let {
		icon,
		iconPosition = 'right',
		disabled = false,
		children,
		onclick
	}: {
		icon?: string;
		iconPosition?: 'left' | 'right';
		disabled?: boolean;
		children: Snippet;
		onclick?: MouseEventHandler<HTMLButtonElement>;
	} = $props();
</script>

{#snippet iconSnippet()}
	<span class="material-symbols-outlined">{icon}</span>
{/snippet}

<button
	class={[
		'text-accent hover:text-primary inline-flex items-center gap-1.5 transition-colors',
		disabled && 'pointer-events-none cursor-not-allowed opacity-50'
	]}
	{onclick}
>
	{#if icon && iconPosition === 'left'}
		{@render iconSnippet()}
	{/if}

	{@render children()}

	{#if icon && iconPosition === 'right'}
		{@render iconSnippet()}
	{/if}
</button>
