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

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

	export function pop(resetTimeout = 0) {
		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>{content}</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);
	}
</style>
