<script lang="ts">
	import { onMount } from 'svelte';

	interface Props {
		oncomplete: () => void;
		oncancel: () => void;
	}

	let { oncomplete, oncancel }: Props = $props();

	let count = $state(3);

	onMount(() => {
		const interval = setInterval(() => {
			count--;
			if (count === 0) {
				clearInterval(interval);
				oncomplete();
			}
		}, 1000);

		return () => clearInterval(interval);
	});
</script>

<div class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black" data-camera-ui>
	<span class="text-8xl font-bold text-white">{count}</span>
	<button onclick={oncancel} class="mt-8 text-sm text-neutral-400">Cancel</button>
</div>
