<script lang="ts">
	let { progress, filename } = $props();
</script>

<div
	class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 font-mono backdrop-blur-sm"
>
	<div
		class="w-[90%] max-w-sm rounded-2xl border border-green-400 bg-[#000f00] p-6 text-sm text-green-300 shadow-2xl"
	>
		<p class="mb-2 text-center text-cyan-300">
			Downloading <span class="font-semibold text-green-400">{filename}</span>
		</p>
		<div class="h-4 w-full overflow-hidden rounded-md border border-green-500 bg-black">
			<div
				class="h-full bg-gradient-to-r from-green-400 to-green-600 transition-all duration-300"
				style="width: {progress}%"
			></div>
		</div>
		<p class="mt-2 text-center text-pink-400">{progress}%</p>
	</div>
</div>
