import { cn } from "./index3.js";
import { Avatar } from "./index15.js";
import { Progress } from "./index16.js";
import { cva } from "class-variance-authority";
import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/content/NotificationItem/NotificationItem.tsx
var notificationItemVariants = cva("relative flex gap-4 items-start overflow-hidden p-4 rounded-xl border bg-card shadow-sm", {
	variants: { variant: {
		primary: "",
		success: "",
		warning: "",
		error: "",
		gray: "",
		avatar: "",
		image: "",
		progress: "",
		none: ""
	} },
	defaultVariants: { variant: "primary" }
});
var outlineIconVariants = cva("", {
	variants: { variant: {
		primary: "border-primary text-primary",
		success: "border-success text-success",
		warning: "border-warning text-warning",
		error: "border-destructive text-destructive"
	} },
	defaultVariants: { variant: "primary" }
});
/** Featured icon with concentric circle outlines */
var OutlineIcon = ({ variant }) => {
	const iconClasses = outlineIconVariants({ variant });
	const Icon = {
		primary: Info,
		success: CheckCircle,
		warning: AlertTriangle,
		error: AlertCircle
	}[variant];
	return /* @__PURE__ */ jsxs("div", {
		className: "relative size-5 shrink-0",
		children: [
			/* @__PURE__ */ jsx("div", { className: cn("absolute -inset-[45%] rounded-full border-2 opacity-10", iconClasses) }),
			/* @__PURE__ */ jsx("div", { className: cn("absolute -inset-[20%] rounded-full border-2 opacity-30", iconClasses) }),
			/* @__PURE__ */ jsx(Icon, { className: cn("size-5", iconClasses) })
		]
	});
};
/** Modern boxed featured icon */
var BoxedIcon = ({ children }) => /* @__PURE__ */ jsx("div", {
	className: "flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-card shadow-sm",
	children: /* @__PURE__ */ jsx("div", {
		className: "text-secondary-foreground",
		children
	})
});
/** Close button */
var CloseButton = ({ onClick }) => /* @__PURE__ */ jsx("button", {
	type: "button",
	onClick,
	className: "absolute end-1 top-1 flex size-11 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
	"aria-label": "Close notification",
	children: /* @__PURE__ */ jsx(X, { className: "size-5" })
});
/** Action buttons */
var ActionButtons = ({ primaryAction, secondaryAction, stacked = false }) => {
	if (!primaryAction && !secondaryAction) return null;
	if (stacked) return /* @__PURE__ */ jsxs("div", {
		className: "flex flex-col gap-2",
		children: [primaryAction && /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: primaryAction.onClick,
			className: "w-full rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
			children: primaryAction.label
		}), secondaryAction && /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: secondaryAction.onClick,
			className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-secondary-foreground hover:bg-card-hover transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
			children: secondaryAction.label
		})]
	});
	return /* @__PURE__ */ jsxs("div", {
		className: "flex items-center gap-3",
		children: [primaryAction && /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: primaryAction.onClick,
			className: "min-h-9 py-1.5 text-sm font-semibold text-primary hover:text-primary/80 rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
			children: primaryAction.label
		}), secondaryAction && /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: secondaryAction.onClick,
			className: "min-h-9 py-1.5 text-sm font-semibold text-secondary-foreground hover:text-foreground rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
			children: secondaryAction.label
		})]
	});
};
var NotificationItem = React.memo(function NotificationItem({ variant = "primary", title, supportingText, showCloseButton = true, onClose, primaryAction, secondaryAction, icon, avatarProps, timestamp, imageSrc, imageAlt, progressValue = 0, progressLabel, stackedActions = false, className, ...props }) {
	const hasActions = primaryAction || secondaryAction;
	const renderLeadingElement = () => {
		switch (variant) {
			case "primary":
			case "success":
			case "warning":
			case "error": return /* @__PURE__ */ jsx(OutlineIcon, { variant });
			case "gray": return icon ? /* @__PURE__ */ jsx(BoxedIcon, { children: icon }) : /* @__PURE__ */ jsx(BoxedIcon, { children: /* @__PURE__ */ jsx(Info, { className: "size-5" }) });
			case "avatar": return /* @__PURE__ */ jsx("div", {
				className: "relative",
				children: /* @__PURE__ */ jsx(Avatar, {
					size: "md",
					indicator: "online",
					...avatarProps
				})
			});
			case "image": return imageSrc ? /* @__PURE__ */ jsx("div", {
				className: "size-[72px] shrink-0 overflow-hidden rounded-lg",
				children: /* @__PURE__ */ jsx("img", {
					src: imageSrc,
					alt: imageAlt || "Notification image",
					loading: "lazy",
					className: "size-full object-cover"
				})
			}) : null;
			case "progress": return icon ? /* @__PURE__ */ jsx(BoxedIcon, { children: icon }) : /* @__PURE__ */ jsx(BoxedIcon, { children: /* @__PURE__ */ jsx(Info, { className: "size-5" }) });
			default: return null;
		}
	};
	const renderContent = () => {
		if (variant === "progress") return /* @__PURE__ */ jsxs("div", {
			className: "flex min-w-0 flex-1 flex-col gap-4 pe-10",
			children: [
				/* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-1",
					children: [/* @__PURE__ */ jsx("h3", {
						className: "text-sm font-semibold text-foreground",
						children: title
					}), supportingText && /* @__PURE__ */ jsx("p", {
						className: "text-sm text-secondary-foreground",
						children: supportingText
					})]
				}),
				/* @__PURE__ */ jsx(Progress, {
					value: progressValue,
					size: "md",
					showValue: true,
					labelPosition: "inline",
					valueFormat: () => progressLabel || `${progressValue}%`
				}),
				hasActions && /* @__PURE__ */ jsx(ActionButtons, {
					primaryAction,
					secondaryAction,
					stacked: stackedActions
				})
			]
		});
		if (variant === "avatar") return /* @__PURE__ */ jsxs("div", {
			className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
			children: [/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-1",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-2",
					children: [/* @__PURE__ */ jsx("h3", {
						className: "text-sm font-semibold text-foreground",
						children: title
					}), timestamp && /* @__PURE__ */ jsx("span", {
						className: "text-sm text-quaternary-foreground",
						children: timestamp
					})]
				}), supportingText && /* @__PURE__ */ jsx("p", {
					className: "text-sm text-secondary-foreground",
					children: supportingText
				})]
			}), hasActions && /* @__PURE__ */ jsx(ActionButtons, {
				primaryAction,
				secondaryAction,
				stacked: stackedActions
			})]
		});
		if (variant === "image") return /* @__PURE__ */ jsxs("div", {
			className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
			children: [
				/* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-1",
					children: [/* @__PURE__ */ jsx("h3", {
						className: "text-sm font-semibold text-foreground",
						children: title
					}), supportingText && /* @__PURE__ */ jsx("p", {
						className: "text-sm text-secondary-foreground",
						children: supportingText
					})]
				}),
				imageSrc && /* @__PURE__ */ jsx("div", {
					className: "w-full aspect-video overflow-hidden rounded-lg",
					children: /* @__PURE__ */ jsx("img", {
						src: imageSrc,
						alt: imageAlt || "Notification image",
						loading: "lazy",
						className: "size-full object-cover"
					})
				}),
				hasActions && /* @__PURE__ */ jsx(ActionButtons, {
					primaryAction,
					secondaryAction,
					stacked: stackedActions
				})
			]
		});
		return /* @__PURE__ */ jsxs("div", {
			className: "flex min-w-0 flex-1 flex-col gap-3 pe-10 pt-0.5",
			children: [/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-1",
				children: [/* @__PURE__ */ jsx("h3", {
					className: "text-sm font-semibold text-foreground",
					children: title
				}), supportingText && /* @__PURE__ */ jsx("p", {
					className: "text-sm text-secondary-foreground",
					children: supportingText
				})]
			}), hasActions && /* @__PURE__ */ jsx(ActionButtons, {
				primaryAction,
				secondaryAction
			})]
		});
	};
	return /* @__PURE__ */ jsxs("article", {
		"data-slot": "notification-item",
		className: cn(notificationItemVariants({ variant }), "transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none", className),
		...props,
		children: [
			renderLeadingElement(),
			renderContent(),
			showCloseButton && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
		]
	});
});
NotificationItem.displayName = "NotificationItem";
//#endregion
export { NotificationItem, notificationItemVariants };

//# sourceMappingURL=index381.js.map