<script lang="ts">
	import { APP_TO_ICON_COMPONENT } from './icons'

	export let name: string
	export let silent = false
	export let after: boolean = false
	export let height = '24px'
	export let width = '24px'
	export let center = false

	$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
</script>

<div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
	{#if !silent && !after}
		{name}
	{/if}
	{#if iconComponent}
		<span class="text-secondary grayscale">
			<svelte:component this={iconComponent} {height} {width} />
		</span>
	{:else}
		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full" />
	{/if}
	{#if !silent && after}
		{name}
	{/if}
</div>
