<script lang="ts">
	import { _ } from 'svelte-i18n';
	export let button: {
		type: string;
		label: string;
		href?: string;
		icon?: any;
		onClick?: any;
	};
</script>

{#if button.type == 'link'}
	<a
		href={button.href}
		class="flex items-center rounded-md px-3 py-2 text-sm font-medium text-gunmetal-950 hover:bg-timberwolf dark:text-timberwolf dark:hover:bg-gunmetal"
	>
		{#if button.icon}
			<svelte:component this={button.icon} class="mr-2 h-5 w-5" />
		{/if}
		{$_(button.label)}
	</a>
{:else if button.type == 'action'}
	<button
		class="flex items-center cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-gunmetal-950 hover:bg-timberwolf dark:text-timberwolf dark:hover:bg-gunmetal"
		on:click={button.onClick}
	>
		{#if button.icon}
			<svelte:component this={button.icon} class="mr-2 h-5 w-5" />
		{/if}
		{$_(button.label)}
	</button>
{/if}
