import { jsxs as x, jsx as i } from "react/jsx-runtime";
import h from "../Img/index.js";
import { styled as n } from "../Theme/index.js";
function f({
  name: o,
  size: t = 36,
  alt: p = "",
  color: r = "#000000",
  prefix: e = "/images",
  showBadge: a = !1,
  style: s = {},
  ...d
}) {
  const g = `${e}/${o}-${r.replace(/^#/, "")}.png`;
  return /* @__PURE__ */ x(l, { style: { width: t, height: t }, children: [
    /* @__PURE__ */ i(
      h,
      {
        width: t,
        height: t,
        alt: p || o,
        src: g,
        style: Object.assign({ width: t }, s),
        ...d
      }
    ),
    a && /* @__PURE__ */ i("i", { className: "badge-point" })
  ] });
}
const l = n("div")`
  position: relative;
  .badge-point {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #fe4e44;
    right: -2px;
    top: 0;
    box-shadow:
      0px 1px 4px rgba(0, 0, 0, 0.3),
      0px 0px 20px rgba(0, 0, 0, 0.1);
  }
`;
export {
  f as default
};
