import { h } from "@stencil/core";
import { ZIconButton } from "./z-icon-button";
import { getContrastColorHelper } from "../../utils/utils";
import { configStore } from "../../store/store";
export const ZTagOrStatusItem = ({ item, expandText, onDelete }) => {
    const { name } = item;
    const theme = configStore.get('theme');
    const isColor = Boolean(item.color);
    const color = item.color || 'var(--color-background-dark)';
    return (h("div", { class: `z-tag-or-status-item ${isColor ? '' : `border border-primary`}`, style: { backgroundColor: isColor ? color : `` }, "data-theme": theme }, item.iconName && h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${item.iconName}.png`, alt: "agent avatar", class: "z-tag-or-status-item-icon", loading: "lazy" }), item.subIconName && h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${item.subIconName}.png`, alt: "agent avatar", class: "z-tag-or-status-item-icon", loading: "lazy" }), h("span", { title: name, class: `z-tag-or-status-item-name ${expandText ? 'whitespace-pre-line' : 'truncate'} ${isColor ? '' : `text-primary`}`, style: { color: isColor ? getContrastColorHelper(color) : undefined } }, name), onDelete && (h(ZIconButton, { variant: "none", iconName: "X", noPadding: true, noPaddingY: true, addClassIcon: `size-3 ${isColor ? '' : `text-primary`}`, onClick: e => {
            e.stopPropagation();
            onDelete();
        } }))));
};
