import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import CircularIcon from "../CircularIcon";
import GetSvgIcon from "../GetSvgIcon";
import "./style.scss";
import { EllipsisText } from "..";
const CompanyLogoPillSelectable = ({ text, variant = "selected", onClick, picturePath = "", props = {}, svgType = "thumb", isHoverShown = true, children, dataCy, }) => {
    const className = clsx({
        "companyLogoPillSelectable--Generic": true,
        "companyLogoPillSelectable--Unselected": variant === "unselected",
        "companyLogoPillSelectable--Selected": variant === "selected",
        "companyLogoPillSelectable--Error": variant === "error",
        "companyLogoPillSelectable--UnselectedHover": variant === "unselected" && isHoverShown,
    });
    return (_jsxs("button", { className: className, onClick: onClick, type: "button", ...props, "data-cy": dataCy, children: [variant === "error" ? (_jsx("span", { className: "errorSvg", children: _jsx(GetSvgIcon, { iconType: "excalamationCircle", iconSize: "24" }) })) : (_jsx("span", { className: "placeholderSvg", children: _jsx(CircularIcon, { iconSize: "24", errorImageContainerSize: "34", iconPath: picturePath, altImageType: "company" }) })), _jsx(EllipsisText, { maxWidth: "330px", toolTipPosition: "bottom", children: text }), _jsx("span", { className: "pillThumbSvg", children: _jsx(GetSvgIcon, { iconSize: "22", iconType: variant === "error" ? "cross" : svgType || "thumb" }) }), children] }));
};
export default CompanyLogoPillSelectable;
