import { t as e } from "../../utils-B7XIe3qq.js";
import "react";
import { jsx as t, jsxs as n } from "react/jsx-runtime";
//#region src/react/primitives/notification-center.tsx
function r(e) {
	let t = Date.now() - e.getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24);
	return n < 60 ? "Just now" : r < 60 ? `${String(r)}m ago` : i < 24 ? `${String(i)}h ago` : a < 7 ? `${String(a)}d ago` : e.toLocaleDateString();
}
function i({ className: r, notifications: i, maxVisible: o = 50, emptyMessage: s = "No notifications", onMarkRead: c, onMarkAllRead: l, onDismiss: u, onClearAll: d, ...f }) {
	let p = i.slice(0, o), m = i.filter((e) => e.read !== !0).length;
	return /* @__PURE__ */ n("div", {
		"data-slot": "notification-center",
		role: "region",
		"aria-label": "Notification center",
		className: e("flex flex-col rounded-xl border border-border-glass bg-glass backdrop-blur-[20px]", "w-full max-w-sm overflow-hidden", r),
		...f,
		children: [/* @__PURE__ */ n("div", {
			className: "flex items-center justify-between border-b border-border-glass px-4 py-3",
			children: [/* @__PURE__ */ n("div", {
				className: "flex items-center gap-2",
				children: [/* @__PURE__ */ t("span", {
					className: "text-sm font-semibold text-foreground",
					children: "Notifications"
				}), m > 0 && /* @__PURE__ */ t("span", {
					"aria-label": `${String(m)} unread`,
					className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent-rose px-1.5 text-[10px] font-bold text-white",
					children: m
				})]
			}), /* @__PURE__ */ n("div", {
				className: "flex items-center gap-1",
				children: [/* @__PURE__ */ t("button", {
					type: "button",
					onClick: l,
					className: "rounded-lg px-2 py-1 text-[11px] text-foreground-secondary transition-colors hover:bg-glass-hover hover:text-foreground",
					children: "Mark all read"
				}), /* @__PURE__ */ t("button", {
					type: "button",
					onClick: d,
					className: "rounded-lg px-2 py-1 text-[11px] text-foreground-secondary transition-colors hover:bg-glass-hover hover:text-foreground",
					children: "Clear all"
				})]
			})]
		}), /* @__PURE__ */ t("div", {
			role: "list",
			className: "flex max-h-80 flex-col overflow-y-auto",
			children: p.length === 0 ? /* @__PURE__ */ t("div", {
				className: "flex items-center justify-center px-4 py-8 text-sm text-foreground-muted",
				children: s
			}) : p.map((e) => /* @__PURE__ */ t(a, {
				item: e,
				onMarkRead: c,
				onDismiss: u
			}, e.id))
		})]
	});
}
function a({ item: i, onMarkRead: a, onDismiss: o }) {
	let s = i.level ?? "info";
	return /* @__PURE__ */ n("div", {
		role: "listitem",
		"data-notification-id": i.id,
		onClick: () => {
			i.read !== !0 && a?.(i.id);
		},
		className: e("group flex gap-3 border-b border-border-glass px-4 py-3 transition-colors last:border-b-0", i.read !== !0 && "bg-primary/5 cursor-pointer", i.read === !0 && "opacity-70"),
		children: [
			/* @__PURE__ */ t("div", {
				className: "flex shrink-0 pt-0.5",
				children: /* @__PURE__ */ t("span", {
					"aria-hidden": "true",
					className: e("inline-block size-2 rounded-full", {
						"bg-accent-cyan": s === "info",
						"bg-accent-emerald": s === "success",
						"bg-accent-amber": s === "warning",
						"bg-accent-rose": s === "error"
					})
				})
			}),
			/* @__PURE__ */ n("div", {
				className: "flex min-w-0 flex-1 flex-col gap-0.5",
				children: [
					/* @__PURE__ */ t("span", {
						className: "text-sm font-medium text-foreground",
						children: i.title
					}),
					i.description !== void 0 && /* @__PURE__ */ t("span", {
						className: "truncate text-xs text-foreground-secondary",
						title: i.description,
						children: i.description
					}),
					/* @__PURE__ */ t("span", {
						className: "text-[11px] text-foreground-muted",
						children: r(i.timestamp)
					})
				]
			}),
			/* @__PURE__ */ n("div", {
				className: "flex shrink-0 items-start gap-1",
				children: [i.action !== void 0 && /* @__PURE__ */ t("button", {
					type: "button",
					onClick: (e) => {
						e.stopPropagation(), i.action?.onClick(i.id);
					},
					className: "rounded-lg px-2 py-0.5 text-[11px] font-medium text-primary transition-colors hover:bg-primary/10",
					children: i.action.label
				}), /* @__PURE__ */ t("button", {
					type: "button",
					"aria-label": "Dismiss notification",
					onClick: (e) => {
						e.stopPropagation(), o?.(i.id);
					},
					className: "rounded-lg p-0.5 text-foreground-muted opacity-0 transition-all hover:bg-glass-hover hover:text-foreground group-hover:opacity-100",
					children: /* @__PURE__ */ n("svg", {
						xmlns: "http://www.w3.org/2000/svg",
						viewBox: "0 0 24 24",
						fill: "none",
						stroke: "currentColor",
						strokeWidth: 2,
						strokeLinecap: "round",
						strokeLinejoin: "round",
						className: "size-3.5",
						children: [/* @__PURE__ */ t("path", { d: "m18 6-12 12" }), /* @__PURE__ */ t("path", { d: "m6 6 12 12" })]
					})
				})]
			})
		]
	});
}
//#endregion
export { i as NotificationCenter, a as NotificationCenterItem };

//# sourceMappingURL=notification-center.js.map