<script lang="ts">
	import { toastList } from '$lib/stores/toast';
</script>

<div class="toast">
	{#each $toastList as toast}
		<div class="toast-item" style="border-top: 4px {toast.color} solid">
			<h3 style="color: {toast.color}">{toast.title}</h3>
			<p>{toast.message}</p>
		</div>
	{/each}
</div>

<style>
	.toast {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.toast-item {
		background-color: var(--bg-secondary);
		padding: 10px;
		color: white;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		transition:
			transform 0.3s,
			opacity 0.3s;
		transform: translateY(30px);
		opacity: 0;
		animation-delay: 0s, 4.7s;
		animation-name: toast-in, toast-out;
		animation-duration: 0.3s, 0.3s;
		animation-fill-mode: forwards, forwards;
	}

	@keyframes toast-in {
		from {
			transform: translateY(30px);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	@keyframes toast-out {
		from {
			transform: translateY(0);
			opacity: 1;
		}
		to {
			transform: translateY(30px);
			opacity: 0;
		}
	}

	.toast-item h3 {
		margin: 0;
		font-weight: bold;
	}
</style>
