<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
	import { defaultIconProps, type IconDef } from './util';

	interface Props {
		icon?: IconDef;
		iconPosition?: 'left' | 'right';
		disabled?: boolean;
		class?: ClassValue | null | undefined;
		children: Snippet;
		onclick?: MouseEventHandler<HTMLButtonElement>;
	}

	let {
		icon,
		iconPosition = 'right',
		disabled = false,
		class: classValue,
		children,
		onclick
	}: Props = $props();
</script>

{#snippet iconSnippet()}
	{#if icon}
		<icon.component {...icon.props || defaultIconProps} />
	{/if}
{/snippet}

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

	{@render children()}

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