<script lang="ts">
	export let title = 'Erfolgreich';
	export let show = false;

	let visible = false;

	$: show && startShow();

	function startShow() {
		if (!show) {
			return;
		}
		visible = true;
		setTimeout(() => {
			visible = false;
		}, 4000);
	}
</script>

<div
	class:hidden={!visible}
	class="pointer-events-none fixed inset-0 z-50 flex items-end justify-center px-4 py-6 sm:items-start sm:justify-end sm:p-6"
>
	<!--
    Notification panel, show/hide based on alert state.

    Entering: "transform ease-out duration-300 transition"
      From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
      To: "translate-y-0 opacity-100 sm:translate-x-0"
    Leaving: "transition ease-in duration-100"
      From: "opacity-100"
      To: "opacity-0"
  -->
	<div
		class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
	>
		<div class="p-4">
			<div class="flex items-start">
				<div class="flex-shrink-0">
					<!-- Heroicon name: outline/check-circle -->
					<svg
						class="h-6 w-6 text-green-400"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						aria-hidden="true"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
				</div>
				<div class="ml-3 w-0 flex-1 pt-0.5">
					<p class="text-sm font-bold text-gray-900">{title}</p>
					<p class="mt-1 text-sm text-gray-500">
						<slot />
					</p>
				</div>
				<div class="ml-4 flex flex-shrink-0">
					<button
						class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
					>
						<span class="sr-only">Close</span>
						<!-- Heroicon name: solid/x -->
						<svg
							class="h-5 w-5"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-hidden="true"
						>
							<path
								fill-rule="evenodd"
								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
								clip-rule="evenodd"
							/>
						</svg>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
