<script lang="ts">
	import type { Application } from '$lib/ApplicationsStore.svelte';
	import type { Flair } from '$lib/FlairStore.svelte';
	import { deleteR, preventDefault } from '$lib/utils';
	let {
		item,
		allowDelete,
		updateApplication,
		application
	}: {
		application?: Application;
		item: Flair;
		allowDelete?: boolean;
		updateApplication?: (item: Application) => void;
	} = $props();

	async function remove() {
		if (!allowDelete || !application || !updateApplication) return;
		try {
			updateApplication(await deleteR(`application/flair/${application.id}/${item.id}`));
		} catch (e) {
			// Show User
			console.log(e);
		}
	}

	let onTop = $state(false);
</script>

<button
	style="background: {item.color}"
	class="inline px-2 py-1 rounded-lg relative"
	onclick={preventDefault(remove)}
	onmouseenter={() => (onTop = true)}
	onmouseleave={() => (onTop = false)}
>
	{item.name}
	{#if onTop && allowDelete}
		<span style="background: {item.color}" class="bi bi-trash-fill text-danger absolute right-0"
		></span>
	{/if}
</button>
