import React from "react";
import styled from "@emotion/styled";
const Icon = ({ fontSize, className, ariaHidden }) => {
    const I = styled.i({ fontSize });
    return React.createElement(I, { className: className, "aria-hidden": ariaHidden });
};
/**
 * Primary UI component for user interaction
 */
export const Button = ({ primary, size = "medium", backgroundColor, label, nobg, navbar = false, icon, secondary, color, imgSrc, iconSize, className, children, disabled, iconOnly, type, form, ...props }) => {
    const mode = primary && !navbar
        ? "on-button--primary"
        : secondary && !navbar
            ? "on-button--secondary"
            : nobg && !navbar
                ? "on-no-background"
                : !navbar
                    ? "on-button--default"
                    : "on-button--navbar";
    const iconWithText = icon && label && !iconOnly
        ? "icon-text"
        : imgSrc && label
            ? "img-icon-text"
            : null;
    const fontIcon = icon
        ? React.createElement(Icon, { fontSize: iconSize, className: icon, ariaHidden: "true" })
        : null;
    const imgIcon = imgSrc
        ? (React.createElement("img", { style: { width: iconSize }, src: imgSrc, alt: label, "aria-hidden": "true" }))
        : null;
    return (React.createElement("button", { form: form, disabled: disabled, role: "button", type: type ? type : "button", className: [
            "on-button",
            `on-button--${size}`,
            mode,
            iconWithText,
            `${className}`,
        ].join(" "), style: { backgroundColor, color }, "aria-label": label, ...props },
        imgIcon,
        fontIcon,
        iconOnly ? null : label,
        children));
};
