import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Avatar } from "./index15.js";
import { ScrollArea } from "./index45.js";
import { motion } from "./index359.js";
import { useReducedMotion } from "./index361.js";
import { cva } from "class-variance-authority";
import { BellRing, Calendar, Clock, Settings, X } from "lucide-react";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/content/NotificationPanel/NotificationPanel.tsx
var notificationDotVariants = cva("rounded-full shrink-0 bg-primary", {
	variants: { size: {
		sm: "size-2",
		md: "size-2.5"
	} },
	defaultVariants: { size: "sm" }
});
var notificationItemVariants = {
	hidden: {
		opacity: 0,
		y: 8
	},
	visible: {
		opacity: 1,
		y: 0,
		transition: {
			duration: .2,
			ease: [
				0,
				0,
				.2,
				1
			]
		}
	}
};
function NotificationPanelItem({ avatarSrc, avatarFallback, name, time, title, description, unread = true, showOnlineStatus = true, type = "message", meetingDate, meetingTime, actions, highlightedSegments, onClick, className }) {
	return /* @__PURE__ */ jsxs(motion.li, {
		"data-slot": "notification-panel-item",
		className: cn("relative flex gap-3 items-start w-full rounded-lg list-none", "transition-colors duration-150 ease-out hover:bg-accent/50 motion-reduce:transition-none", className),
		variants: notificationItemVariants,
		children: [/* @__PURE__ */ jsx(Avatar, {
			src: avatarSrc,
			fallback: avatarFallback || name,
			size: "lg",
			indicator: showOnlineStatus ? "online" : void 0,
			className: "shrink-0"
		}), /* @__PURE__ */ jsxs("div", {
			className: "flex-1 min-w-0 flex flex-col gap-3",
			children: [
				/* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-1",
					children: [
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2 flex-wrap",
							children: [/* @__PURE__ */ jsx("span", {
								className: "text-sm font-medium text-secondary-foreground",
								children: name
							}), /* @__PURE__ */ jsx("span", {
								className: "text-xs text-muted-foreground",
								children: time
							})]
						}),
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2",
							children: [unread && /* @__PURE__ */ jsx("span", {
								className: cn(notificationDotVariants(), "animate-pulse motion-reduce:animate-none"),
								"aria-hidden": "true"
							}), /* @__PURE__ */ jsx("button", {
								type: "button",
								className: cn("text-sm font-bold text-secondary-foreground text-start", "cursor-pointer bg-transparent border-0 p-0", "after:absolute after:inset-0 after:rounded-lg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:rounded-sm"),
								onClick,
								"aria-label": [
									unread && "Unread",
									type !== "message" && type,
									"notification:",
									title
								].filter(Boolean).join(" "),
								children: title
							})]
						}),
						description && !highlightedSegments && /* @__PURE__ */ jsx("p", {
							className: "text-sm text-muted-foreground line-clamp-2",
							children: description
						}),
						highlightedSegments && /* @__PURE__ */ jsx("p", {
							className: "text-sm text-muted-foreground line-clamp-2",
							children: highlightedSegments.map((segment, index) => segment.highlighted ? /* @__PURE__ */ jsx("span", {
								className: "font-medium text-primary",
								children: segment.text
							}, index) : /* @__PURE__ */ jsx("span", { children: segment.text }, index))
						})
					]
				}),
				type === "meeting" && (meetingDate || meetingTime) && /* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-1 flex-wrap",
					children: [meetingDate && /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2 flex-1 min-w-0",
						children: [/* @__PURE__ */ jsx(Calendar, { className: "size-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ jsx("span", {
							className: "text-sm text-muted-foreground truncate",
							children: meetingDate
						})]
					}), meetingTime && /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2 flex-1 min-w-0",
						children: [/* @__PURE__ */ jsx(Clock, { className: "size-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ jsx("span", {
							className: "text-sm text-muted-foreground truncate",
							children: meetingTime
						})]
					})]
				}),
				actions && actions.length > 0 && /* @__PURE__ */ jsx("div", {
					className: "flex items-center gap-3 relative z-10",
					children: actions.map((action, index) => /* @__PURE__ */ jsx(Button, {
						appearance: "link",
						variant: "primary",
						size: "sm",
						className: cn("min-h-11 px-1", action.primary ? "text-primary font-semibold" : "text-secondary-foreground font-semibold"),
						onClick: action.onClick,
						children: action.label
					}, index))
				})
			]
		})]
	});
}
NotificationPanelItem.displayName = "NotificationPanelItem";
function NotificationSection({ title, children, className }) {
	const prefersReducedMotion = useReducedMotion();
	const sectionVariants = useMemo(() => ({ visible: { transition: { staggerChildren: prefersReducedMotion ? 0 : .05 } } }), [prefersReducedMotion]);
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "notification-section",
		className: cn("flex flex-col gap-4", className),
		children: [/* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-3",
			children: [/* @__PURE__ */ jsx("h3", {
				className: "text-sm font-medium text-secondary-foreground",
				children: title
			}), /* @__PURE__ */ jsx("div", {
				className: "h-px bg-surface-2",
				"aria-hidden": "true"
			})]
		}), /* @__PURE__ */ jsx(motion.ul, {
			className: "flex flex-col gap-6",
			initial: "hidden",
			animate: "visible",
			variants: sectionVariants,
			children
		})]
	});
}
NotificationSection.displayName = "NotificationSection";
var headerLinkButtonClass = "min-h-11 px-1 text-primary font-normal";
var notificationPanelVariants = cva("relative flex flex-col overflow-hidden", {
	variants: { variant: {
		desktop: "bg-muted border border-border rounded-3xl shadow-3xl",
		mobile: "bg-background shadow-xl"
	} },
	defaultVariants: { variant: "desktop" }
});
function NotificationPanel({ title = "Notifications", variant = "desktop", onSettingsClick, onMarkAllRead, onClearAll, onClose, children, showOverlay = false, width = 573, height = 675, className }) {
	const prefersReducedMotion = useReducedMotion();
	const panelContent = /* @__PURE__ */ jsxs("section", {
		"data-slot": "notification-panel",
		"aria-label": title,
		className: cn(notificationPanelVariants({ variant }), className),
		style: {
			width: variant === "desktop" ? width : "100%",
			maxWidth: "100%",
			height: variant === "desktop" ? height : "100%"
		},
		children: [/* @__PURE__ */ jsx("div", {
			className: "flex flex-col pb-4",
			children: /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-6 px-6",
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: "flex gap-4 items-start pt-6",
						children: [/* @__PURE__ */ jsx("div", {
							className: "shrink-0 size-10 flex items-center justify-center bg-card/60 border border-border rounded-lg shadow-sm",
							children: /* @__PURE__ */ jsx(motion.span, {
								animate: prefersReducedMotion ? void 0 : { rotate: [
									0,
									12,
									-10,
									6,
									-3,
									0
								] },
								transition: {
									duration: .6,
									delay: .3,
									ease: "easeOut"
								},
								className: "flex",
								children: /* @__PURE__ */ jsx(BellRing, { className: "size-5 text-secondary-foreground" })
							})
						}), /* @__PURE__ */ jsx("div", {
							className: "flex-1 flex flex-col gap-0.5 justify-center",
							children: /* @__PURE__ */ jsx("h2", {
								className: "text-xl font-semibold text-foreground",
								children: title
							})
						})]
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "flex items-start justify-between",
						children: [/* @__PURE__ */ jsx(Button, {
							appearance: "link",
							variant: "primary",
							size: "sm",
							className: headerLinkButtonClass,
							startIcon: /* @__PURE__ */ jsx(Settings, { className: "size-5" }),
							onClick: onSettingsClick,
							children: "Settings"
						}), /* @__PURE__ */ jsxs("div", {
							className: "flex items-start gap-1",
							children: [
								/* @__PURE__ */ jsx(Button, {
									appearance: "link",
									variant: "primary",
									size: "sm",
									className: headerLinkButtonClass,
									onClick: onMarkAllRead,
									children: "Mark all read"
								}),
								/* @__PURE__ */ jsx("div", {
									className: "size-6 flex items-center justify-center self-center",
									children: /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-surface-2" })
								}),
								/* @__PURE__ */ jsx(Button, {
									appearance: "link",
									variant: "primary",
									size: "sm",
									className: headerLinkButtonClass,
									onClick: onClearAll,
									children: "Clear all"
								})
							]
						})]
					}),
					/* @__PURE__ */ jsx(Button, {
						appearance: "ghost",
						variant: "secondary",
						size: "icon",
						"aria-label": "Close notifications",
						className: "absolute top-3 end-4 size-10 text-muted-foreground hover:text-foreground transition-colors duration-150 ease-out [&_svg]:transition-transform [&_svg]:duration-200 [&_svg]:ease-out hover:[&_svg]:rotate-90 motion-reduce:[&_svg]:transition-none",
						onClick: onClose,
						children: /* @__PURE__ */ jsx(X, { className: "size-5" })
					})
				]
			})
		}), /* @__PURE__ */ jsx(ScrollArea, {
			className: "flex-1 min-h-0",
			children: /* @__PURE__ */ jsx("div", {
				className: "flex flex-col gap-4 px-6 pb-6",
				"aria-live": "polite",
				children
			})
		})]
	});
	if (variant === "mobile" && showOverlay) return /* @__PURE__ */ jsxs("div", {
		className: "relative flex items-start ps-6 h-full w-full",
		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/70 backdrop-blur" }), /* @__PURE__ */ jsx("div", {
			className: "relative flex-1 h-full",
			children: panelContent
		})]
	});
	return panelContent;
}
NotificationPanel.displayName = "NotificationPanel";
//#endregion
export { NotificationPanel, NotificationPanelItem, NotificationSection, notificationDotVariants, notificationPanelVariants };

//# sourceMappingURL=index456.js.map