<script lang="ts">
	export let variant: 'primary' | 'secondary' | 'error' | 'ghost' | 'link' = 'primary';
	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
	export let disabled = false;
	export let loading = false;
	export let type: 'button' | 'submit' | 'reset' = 'button';
	export let href: string | undefined = undefined;

	$: classes = [
		'btn',
		variant === 'primary' ? 'btn-primary' : '',
		variant === 'secondary' ? 'btn-secondary' : '',
		variant === 'error' ? 'btn-error' : '',
		variant === 'ghost' ? 'btn-ghost' : '',
		variant === 'link' ? 'btn-link' : '',
		size === 'xs' ? 'btn-xs' : '',
		size === 'sm' ? 'btn-sm' : '',
		size === 'lg' ? 'btn-lg' : '',
		$$props.class || ''
	]
		.filter(Boolean)
		.join(' ');
</script>

{#if href}
	<a {href} class={classes} class:btn-disabled={disabled}>
		{#if loading}
			<span class="loading loading-spinner loading-sm"></span>
		{/if}
		<slot />
	</a>
{:else}
	<button {type} {disabled} class={classes} on:click>
		{#if loading}
			<span class="loading loading-spinner loading-sm"></span>
		{/if}
		<slot />
	</button>
{/if}
