import { Black } from "../../../Types/BrandColors";
import Color from "../../../Types/Color";
import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
import React from "react";
import Tooltip from "../Tooltip/Tooltip";
export var PillSize;
(function (PillSize) {
    PillSize["Small"] = "10px";
    PillSize["Normal"] = "13px";
    PillSize["Large"] = "15px";
    PillSize["ExtraLarge"] = "18px";
})(PillSize || (PillSize = {}));
const Pill = (props) => {
    var _a;
    if (props.isMinimal) {
        return (React.createElement("span", { className: "relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5 text-sm" },
            React.createElement("span", { className: "absolute flex flex-shrink-0 items-center justify-center" },
                React.createElement("span", { className: "h-1.5 w-1.5 rounded-full bg-rose-500", style: {
                        backgroundColor: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) || props.color
                            ? props.color.toString()
                            : Black.toString(),
                    }, "aria-hidden": "true" })),
            React.createElement("span", { className: "ml-3.5 font-medium text-gray-900" }, props.text)));
    }
    const getPillElement = () => {
        var _a, _b;
        return (React.createElement("span", { "data-testid": "pill", className: "inline-flex items-center rounded-full p-1 pl-3 pr-3", style: Object.assign({ 
                // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
                color: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.color) || Color.shouldUseDarkText(props.color || Black)
                    ? "#000000"
                    : "#ffffff", backgroundColor: ((_b = props.style) === null || _b === void 0 ? void 0 : _b.backgroundColor) || props.color
                    ? props.color.toString()
                    : Black.toString(), fontSize: props.size ? props.size.toString() : PillSize.Normal }, props.style) },
            props.icon ? (React.createElement(Icon, { icon: props.icon, size: SizeProp.Small, thick: ThickProp.Thick, className: "mr-2" })) : null,
            props.text));
    };
    if (props.tooltip) {
        return React.createElement(Tooltip, { text: props.tooltip }, getPillElement());
    }
    return getPillElement();
};
export default Pill;
//# sourceMappingURL=Pill.js.map