<script lang="ts">
	import { applicationStore } from '$lib/ApplicationsStore.svelte';
	import { preventDefault } from '$lib/utils';
	import type { Snippet } from 'svelte';

	let { ondrop, icon, children }: { ondrop: () => void; icon: string; children: Snippet } =
		$props();
</script>

<div
	class="grid place-items-center w-full card p-2 rounded-lg"
	role="none"
	ondragover={preventDefault(() => {})}
	ondragenter={preventDefault(() => {})}
	{ondrop}
>
	<span class="bi bi-{icon} text-7xl absolute" class:animate-bounce={applicationStore.dragging}
	></span>
	<span class="bi bi-{icon} text-7xl opacity-0"></span>
	<div class="text-xl">{@render children()}</div>
</div>
