import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BellRing, X } from "lucide-react";
import { Button } from "../../components/ui/button";
export function NotificationItem(props) {
    const { notification, onOpen, onUnsubscribe, unsubscribeDisabled = false, } = props;
    const date = new Date(notification.createdAt);
    const timestamp = Number.isNaN(date.getTime())
        ? ""
        : date.toLocaleString(undefined, {
            month: "short",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
        });
    const content = (_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(BellRing, { className: "text-neutral-grey-50 mt-0.5 h-3.5 w-3.5" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-neutral-grey-100 truncate text-xs font-semibold", children: notification.title }), _jsx("div", { className: "text-neutral-grey-100 mt-0.5 text-xs", children: notification.message }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-[10px]", children: timestamp })] })] }));
    const className = `flex items-start gap-2 rounded border p-2 text-left ${notification.isRead
        ? "border-border-default bg-white"
        : "border-feedback-blue bg-feedback-blue-light/40"} ${onOpen ? "cursor-pointer transition-colors hover:bg-neutral-grey-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-feedback-blue focus-visible:ring-offset-1" : ""}`;
    const handleOpen = () => {
        if (!onOpen)
            return;
        void onOpen(notification.id);
    };
    const handleKeyDown = (event) => {
        if (!onOpen)
            return;
        if (event.key !== "Enter" && event.key !== " ")
            return;
        event.preventDefault();
        void onOpen(notification.id);
    };
    const handleUnsubscribe = (event) => {
        event.stopPropagation();
        if (!onUnsubscribe)
            return;
        void onUnsubscribe(notification.id);
    };
    return (_jsxs("div", { className: className, "data-testid": `notification-item-${notification.id}`, onClick: onOpen ? handleOpen : undefined, onKeyDown: onOpen ? handleKeyDown : undefined, role: onOpen ? "button" : undefined, tabIndex: onOpen ? 0 : undefined, children: [_jsx("div", { className: "min-w-0 flex-1", children: content }), onUnsubscribe ? (_jsxs(Button, { type: "button", size: "xxs", variant: "ghost", className: "text-neutral-grey-50 hover:text-feedback-red h-6 px-2 text-[10px]", disabled: unsubscribeDisabled, onClick: handleUnsubscribe, onKeyDown: (event) => event.stopPropagation(), "data-testid": `notification-item-unsubscribe-${notification.id}`, children: [_jsx(X, { className: "mr-1 size-3" }), "Unsubscribe"] })) : null] }));
}
//# sourceMappingURL=NotificationItem.js.map