import {
  Flex
} from "./chunk-5ENSQ45B.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  Link
} from "./chunk-SWMGDTQN.js";
import {
  getColor
} from "./chunk-VAH342U2.js";

// src/components/IconWithCircleBackground.tsx
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function IconWithCircleBackground({
  iconName = "WarningSign",
  iconWidth = 40,
  to,
  onClick,
  padding,
  darkBg = false,
  shouldRotate = false,
  noBg = false,
  hoverActiveBg = false,
  disabled = false,
  bgColor,
  iconColor,
  iconStrokeWidth,
  opaque = false,
  showNewTag = false
}) {
  const content = /* @__PURE__ */ jsxs(
    Flex,
    {
      center: true,
      onClick,
      disabled,
      as: onClick ? "button" : "div",
      asButtonType: "button",
      position: "relative",
      children: [
        /* @__PURE__ */ jsx(
          StyledIconWithCircleBackground,
          {
            size: iconWidth,
            padding,
            darkBg,
            hoverActiveBg,
            shouldRotate,
            noBg,
            bgColor,
            children: /* @__PURE__ */ jsx(
              Icon,
              {
                name: iconName,
                width: iconWidth,
                color: iconColor ? iconColor : "secondary",
                iconProps: {
                  strokeWidth: iconStrokeWidth,
                  fill: opaque ? "currentColor" : "none"
                }
              }
            )
          }
        ),
        showNewTag && /* @__PURE__ */ jsx(NewTag, { "data-testid": "icon-new-tag", children: "NEW" })
      ]
    }
  );
  return to ? /* @__PURE__ */ jsx("div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ jsx(Link, { to, disabled, children: content }) }) : content;
}
var StyledIconWithCircleBackground = styled.div`
  background: ${({ theme, darkBg, noBg, bgColor }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : bgColor ? getColor(theme, bgColor) : getColor(theme, "grayBlue94")};

  &:hover {
    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${getColor(theme, "grayBlue94")}` : ""};
  }
  &:active {
    ${({ theme, hoverActiveBg }) => hoverActiveBg ? `background: ${getColor(theme, "grayBlue78")}` : ""};
  }

  border-radius: 50%;
  padding: ${({ size, padding }) => padding != null ? padding : getPadding(size)}px;
  display: flex;
  justify-content: center;
  ${({ size, padding }) => `width: ${size + (padding != null ? padding : getPadding(size)) * 2}px; height: ${size + (padding != null ? padding : getPadding(size)) * 2}px;`}

  @keyframes IconWithCircleBackgroundRotate {
    0% {
      transform: rotate(0);
    }
    35% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  ${({ shouldRotate }) => shouldRotate && `animation: IconWithCircleBackgroundRotate 10s ease infinite;`}
`;
function getPadding(size) {
  if (size === 48) {
    return 38;
  }
  if (size === 40) {
    return 20;
  }
  if (size === 36) {
    return 14;
  }
  if (size === 20) {
    return 10;
  }
  return 16;
}
var NewTag = styled.div`
  position: absolute;
  right: 8px;
  bottom: -4px;

  display: flex;
  padding: 2px 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;

  border-radius: 4px;
  background: #179a1c;

  color: #f9f9f9;
  font-family: Manrope;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 12px; /* 133.333% */
  letter-spacing: 0.72px;
`;

export {
  IconWithCircleBackground
};
