import "../Badge.css";
import { jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { str2hsl, hsl2str } from "./internal/functions.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
const base = "Badge_base_6715f";
const dashed = "Badge_dashed_6715f";
const css = {
  base,
  dashed
};
const fontColorLight = "#FFFFFF";
const fontColorDark = "#000810";
const Badge = ({
  text,
  dashed: dashed2 = false,
  backgroundColor,
  ...props
}) => {
  const {
    themeSettings: { themeIsDark, className: themeClass },
    getThemeVar
  } = useTheme();
  const bgColor = backgroundColor ? backgroundColor : str2hsl(getThemeVar("surface"));
  const { classes, style } = useMemo(() => {
    const classes2 = [css.base, themeClass];
    const style2 = {
      backgroundColor: hsl2str(bgColor),
      border: bgColor.l < 15 ? "1px solid #646464" : "",
      color: bgColor.l > 70 ? fontColorDark : fontColorLight
    };
    if (dashed2)
      classes2.push(css.dashed);
    const isDark = themeIsDark;
    style2.backgroundColor = hsl2str({
      ...bgColor,
      s: bgColor.s > 0 ? isDark ? 70 : 50 : 0
    });
    return { classes: classes2, style: style2 };
  }, [dashed2, bgColor, themeClass, themeIsDark]);
  return (
    // Need this wrapper for tooltip to apply
    /* @__PURE__ */ jsx("span", { ...props, children: /* @__PURE__ */ jsx("span", { className: classes.join(" "), style, children: text }) })
  );
};
export {
  Badge as default
};
