package templates

import "fmt"

// NotificationList renders the container for notifications
templ NotificationList() {
	<ul x-sync id="notification_list" x-merge="prepend" role="status" class="list-unstyled">
		{ children... }
	</ul>
}

// NotificationToast renders a single notification toast
templ NotificationToast(message, notificationType string) {
	<li>
		<div
			class={ fmt.Sprintf("toast align-items-center text-white bg-%s show", notificationType) }
			role="alert"
			aria-live="assertive"
			aria-atomic="true"
			x-data="{
				show: false,
				init() {
					this.$nextTick(() => this.show = true);
					setTimeout(() => this.dismiss(), 6000);
				},
				dismiss() {
					this.show = false;
					setTimeout(() => this.$root.remove(), 500);
				}
			}"
			x-show="show"
			x-transition.duration.500ms
		>
			<div class="d-flex">
				<div class="toast-body">{ message }</div>
				<button
					type="button"
					class="btn-close btn-close-white me-2 m-auto"
					@click="dismiss()"
					aria-label="Close"
				>
					&times;
				</button>
			</div>
		</div>
	</li>
}

// Helper functions for common notification types
templ SuccessNotification(message string) {
	@NotificationList() {
		@NotificationToast(message, "success")
	}
}

templ ErrorNotification(message string) {
	@NotificationList() {
		@NotificationToast(message, "danger")
	}
}

templ WarningNotification(message string) {
	@NotificationList() {
		@NotificationToast(message, "warning")
	}
}

templ InfoNotification(message string) {
	@NotificationList() {
		@NotificationToast(message, "info")
	}
}