import "../Nameplate.css";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useMemo, useLayoutEffect } from "react";
import Icon from "./Icon.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
import { B as Body } from "../Typography-Q-0_2LT9.js";
import useResize from "./internal/useResize.js";
const base = "Nameplate_base_cb328";
const icon = "Nameplate_icon_cb328";
const text = "Nameplate_text_cb328";
const alias = "Nameplate_alias_cb328";
const compact = "Nameplate_compact_cb328";
const css = {
  base,
  icon,
  text,
  alias,
  compact
};
const Nameplate = ({ alias: alias2, compact: compact2, icon: icon2, iconSize, name }) => {
  const { size, refCallback } = useResize();
  const [tooltip, setTooltip] = useState(true);
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classnames = [css.base, themeClass];
  if (compact2)
    classnames.push(css.compact);
  const iconComponent = useMemo(() => {
    if (typeof icon2 === "string") {
      return /* @__PURE__ */ jsx(Icon, { decorative: true, name: icon2, size: iconSize });
    } else
      return icon2;
  }, [icon2, iconSize]);
  useLayoutEffect(() => {
    setTooltip(false);
    const timer = setTimeout(() => {
      setTooltip(true);
    }, 5);
    return () => clearTimeout(timer);
  }, [size]);
  return /* @__PURE__ */ jsxs("div", { className: classnames.join(" "), ref: refCallback, children: [
    /* @__PURE__ */ jsx("div", { className: css.icon, children: iconComponent }),
    /* @__PURE__ */ jsxs("div", { className: css.text, children: [
      alias2 && /* @__PURE__ */ jsx(Body, { truncate: { rows: 1, tooltip }, children: alias2 }),
      /* @__PURE__ */ jsx(Body, { truncate: { rows: 1, tooltip }, children: name })
    ] })
  ] });
};
export {
  Nameplate as default
};
