<script lang="ts">
	import Ellipsis from './Ellipsis.svelte';
	import Ripple from './Ripple.svelte';
	import Grid from './Grid.svelte';

	export let message: string | undefined = undefined;
	export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
</script>

<div class="card popup">
	{#if loader === 'ellipsis'}
		<Ellipsis />
	{:else if loader === 'ripple'}
		<Ripple />
	{:else if loader === 'grid'}
		<Grid />
	{/if}

	{#if message}
		<p />

		{message}
	{/if}
</div>

<style>
	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
