import { jsx as e, jsxs as g } from "react/jsx-runtime";
/* empty css               */
import { px1 as C } from "./index-general.module.js";
import { classNames as n } from "./index-classNames.js";
import { Icon as N } from "./index-Icon.js";
import { IconNames as u } from "./index-IconNames.js";
import { Popover as y } from "./index-Popover.js";
import { Render as I } from "./index-Render.js";
import "react";
import { ComponentContainer as T } from "./index-ComponentContainer.js";
import { Text as b } from "./index-Text.js";
const S = (a) => {
  const {
    id: l,
    text: m,
    type: s = "tag-default",
    hasDeleteBtn: c,
    deleteBtnCallback: r,
    popoverMessage: o,
    variant: p = "tag",
    active: d,
    hidden: f = !1,
    textColor: t,
    hasInnerElement: h,
    innerElement: v
  } = a;
  function x(i) {
    return o ? e(y, {
      message: o,
      wrapChildren: !1,
      maxWidth: "512px",
      children: i
    }) : i;
  }
  return e(T, {
    className: n("Tag-container", f ? "hidden" : ""),
    children: x(g("div", {
      className: `${p} ${s}`,
      style: d ? {
        opacity: "1"
      } : {},
      children: [e(b, {
        color: t ?? t,
        translate: !1,
        children: m
      }), e(I, {
        if: h,
        children: e("div", {
          className: n(C),
          children: v
        })
      }), c && e("div", {
        className: "tag-btn-delete",
        onClick: () => {
          r && r(l);
        },
        children: e(N, {
          forceSize: 16,
          color: "inherit",
          hoverColor: "inherit",
          children: u.close
        })
      })]
    }))
  });
};
export {
  S as Tag
};
