import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Transition } from "@headlessui/react";
import { CircleCheck, AlertTriangle, Info, CircleX, X } from "lucide-react";
import { Fragment, useEffect, useState, useRef } from "react";
const icons = {
    success: CircleCheck,
    error: CircleX,
    warning: AlertTriangle,
    info: Info
};
const colors = {
    success: 'text-success',
    error: 'text-destructive',
    warning: 'text-attention',
    info: 'text-info'
};
export function NotificationPanel({ data, onClose }) {
    const [show, setShow] = useState(true);
    const timeoutRef = useRef(null);
    const resetTimeout = () => {
        if (timeoutRef.current) {
            globalThis.clearTimeout(timeoutRef.current);
        }
        if (data.duration) {
            timeoutRef.current = setTimeout(() => setShow(false), data.duration);
        }
    };
    const clearCurrentTimeout = () => {
        if (timeoutRef.current) {
            globalThis.clearTimeout(timeoutRef.current);
            timeoutRef.current = null;
        }
    };
    useEffect(() => {
        resetTimeout();
        return clearCurrentTimeout;
    }, [data.duration]);
    const Icon = icons[data.status] || Info;
    const color = colors[data.status] || 'text-info';
    // Global notification live region, render this permanently at the end of the document
    return (_jsx("div", { "aria-live": "assertive", className: "pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-100", children: _jsx("div", { className: "flex w-full flex-col items-center space-y-4 sm:items-end", children: _jsx(Transition, { appear: true, show: show, as: Fragment, afterLeave: onClose, enter: "transform ease-out duration-700 transition", enterFrom: "translate-y-0 opacity-0 sm:translate-y-0 sm:translate-x-2", enterTo: "translate-y-2 opacity-100 sm:translate-x-0", leave: "transition ease-in duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx("div", { className: "pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-muted shadow-lg ring-1 ring-border", onMouseEnter: clearCurrentTimeout, onMouseLeave: resetTimeout, children: _jsx("div", { className: "p-5", children: _jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "shrink-0", children: _jsx(Icon, { className: `size-6 ${color}`, "aria-hidden": "true" }) }), _jsxs("div", { className: "ml-3 flex-1 pt-0.5 min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-foreground break-words", children: data.title }), data.description && (_jsx("p", { className: "mt-2 text-sm text-muted break-words whitespace-pre-wrap leading-relaxed", children: data.description }))] }), _jsx("div", { className: "ml-4 flex shrink-0", children: _jsxs("button", { type: "button", className: "inline-flex rounded-md bg-muted text-muted hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background", onClick: () => setShow(false), children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(X, { className: "size-5", "aria-hidden": "true" })] }) })] }) }) }) }) }) }));
}
//# sourceMappingURL=NotificationPanel.js.map