import { jsx as y } from "react/jsx-runtime";
import { useDynamicImport as w } from "./index-use-dynamic-import.js";
import { classNames as L } from "./index-classNames.js";
import { parseColor as f, applyOpacity as O } from "./index-color-helpers.js";
import { StyledSVG as j } from "./index-StyledSVG.js";
import "react";
import z from "./index-Icon.module.scss.js";
var s;
(function(e) {
  e.small = "small", e.large = "large";
})(s || (s = {}));
const F = (e) => {
  const {
    style: v,
    children: C,
    svgClassName: x = "",
    className: $ = "",
    onClick: I,
    role: S,
    icnRef: M,
    hasCircle: k,
    testId: c,
    forceSize: t,
    circleSize: n,
    spin: N,
    onMouseEnter: m,
    onMouseLeave: p
  } = e;
  let {
    type: a,
    color: o,
    fillColor: l,
    hoverColor: r,
    fillOpacity: d
  } = e, i = {
    display: "inlineBlock",
    flexShrink: 0
  };
  if (a || (a = s.small), o ? o = f(o) : o = "var(--n900)", r ? r = f(r) : r = o, k && (i = {
    ...i,
    border: `2px solid ${o}`,
    padding: 2,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: "50%",
    height: n || "auto",
    width: n || "auto"
  }, l)) {
    l = f(l);
    const g = d ? O(l, d) : l;
    i = {
      ...i,
      backgroundColor: g,
      border: `2px solid ${g}`
      // backgroundClip: "padding-box", // Ensures the background color doesn't bleed into the border
    };
  }
  const h = a === s.small ? 16 : 24, b = a === s.small ? "" : "-1", {
    SvgIcon: u,
    loading: R,
    error: E
  } = w(`icons/Icon-${C}${b}.svg`);
  return u ? y("span", {
    "data-testid": c,
    onClick: I,
    onMouseEnter: m,
    onMouseLeave: p,
    className: L($, N ? z.spin : ""),
    role: S,
    ref: M,
    style: {
      ...v,
      ...i,
      // border:'1px solid red',
      // width: height,
      // height: height,
      display: "flex"
    },
    children: y(j, {
      role: "figure",
      testid: c ? `${c}-svg` : "",
      hovercolor: r,
      className: x,
      width: t || h,
      height: t || h,
      color: o,
      src: u,
      onMouseEnter: m,
      onMouseLeave: p
    })
  }) : null;
};
export {
  F as Icon,
  s as IconSize
};
