<script>
	import { fade, fly } from 'svelte/transition';

	let { type = 'confirm' } = $props();
	let open = $state(false);
	let message = $state('');

	export function pop(msg = '', resetTimeout = 0) {
		message = msg;
		open = true;
		if (resetTimeout > 0) {
			setTimeout(() => {
				open = false;
			}, resetTimeout);
		}
	}
</script>

{#if open}
	<div in:fly={{ duration: 200, y: 100 }} out:fade class="popup {type}">
		<div class="popup-content">
			<p>{message}</p>
		</div>
	</div>
{/if}

<style>
	.popup {
		position: fixed;
		width: 20rem;
		padding: 1rem;
		margin: 2rem;
		right: 0;
		bottom: 0;
		border-radius: 0.1rem;
	}
	.confirm {
		background-color: var(--light-accent);
	}
	.error {
		background-color: var(--accent);
	}
</style>
