import React__default from 'react';
import { T as Typography } from './Typography-es.js';
import { I as Icon } from './Icon-es.js';
import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-es2.js';

var styles = {"action":"zfAZTjk0VNE-","actionUrl":"iiHzJY7IVi0-","label":"R0mZNYJjNCg-","spinning":"rP-C67Ex-6M-"};

function DataListAction({ label, icon, destructive, visible = () => true, onClick, actionUrl, }) {
    const { activeItem } = useDataListLayoutActionsContext();
    // Don't render if the item is not visible
    if (activeItem && !visible(activeItem)) {
        return null;
    }
    const color = destructive ? "destructive" : "heading";
    function getActionLabel() {
        if (typeof label === "string") {
            return label;
        }
        if (activeItem) {
            return label(activeItem);
        }
    }
    if (actionUrl) {
        return (React__default.createElement("a", { href: actionUrl, rel: "noopener noreferrer", className: `${styles.action} ${styles.actionUrl}`, onClick: handleClick },
            React__default.createElement(Typography, { textColor: color },
                React__default.createElement("span", { className: styles.label }, getActionLabel())),
            icon && React__default.createElement(Icon, { name: icon, color: color })));
    }
    return (React__default.createElement("button", { type: "button", className: styles.action, onClick: handleClick },
        React__default.createElement(Typography, { textColor: color },
            React__default.createElement("span", { className: styles.label }, getActionLabel())),
        icon && React__default.createElement(Icon, { name: icon, color: color })));
    function handleClick() {
        if (activeItem) {
            onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);
        }
        else {
            onClick === null || onClick === void 0 ? void 0 : onClick();
        }
    }
}

export { DataListAction as D };
