import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import 'react';

/**
 * TableActionsMenu component for displaying actions in an overflow menu
 */
const TableActionsMenu = ({ actions, row, onClose, className, }) => {
    const handleActionClick = (action) => {
        var _a;
        if ((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))
            return;
        action.onClick(row);
        onClose();
    };
    return (jsx("div", { className: cn("min-w-[180px] p-1", className), role: "menu", "aria-label": "Row actions", children: actions.map((action) => {
            var _a;
            const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
            const Icon = action.icon;
            return (jsxs("button", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-base font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
                    ? "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)] focus:bg-[var(--color-danger-50)]"
                    : "text-[var(--color-text-primary)]", isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent"), role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
        }) }));
};

export { TableActionsMenu };
