<script lang="ts">
	interface Props {
		active: boolean;
	}
	let { active }: Props = $props();
</script>

{#if active}
	<span
		class="pointer-events-none absolute inset-0 flex items-center justify-center"
		aria-hidden="true"
		data-testid="heart-burst"
	>
		<svg
			class="h-24 w-24 text-red-500 drop-shadow-lg"
			style="animation: heart-burst 700ms ease-out forwards;"
			fill="currentColor"
			viewBox="0 0 24 24"
		>
			<path
				d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z"
			/>
		</svg>
	</span>
{/if}

<style>
	@keyframes heart-burst {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}
		30% {
			transform: scale(1.2);
			opacity: 1;
		}
		70% {
			transform: scale(1);
			opacity: 1;
		}
		100% {
			transform: scale(1.4);
			opacity: 0;
		}
	}
</style>
