<script>
	export let show = false;
	export let title = 'Error';
	export let message = 'Error';

	function onClose() {
		show = false;
	}
</script>

{#if show}
	<div
		on:click={() => {
			onClose();
		}}
		class="h-screen w-screen bg-opacity-60 bg-black fixed top-0 left-0 z-10 py-20 "
	>
		<div
			on:click|stopPropagation
			class="h-full w-3/4 bg-red-500 dark:bg-red-800 dark:text-slate-200 mx-auto rounded-xl pb-3  overflow-y-auto"
		>
			<div class="bg-zinc-800 font-bold text-white dark:bg-slate-700 rounded-t-xl p-3">
				<span>{title}</span>
			</div>
			<div class="p-3">
				<p class="text-white">
					{message}
				</p>
			</div>
		</div>
	</div>
{/if}
