import { jsx as i, jsxs as m, Fragment as d } from "react/jsx-runtime";
import { Link as x } from "@mui/material";
import h from "../Icon/image.js";
import { styled as f } from "../Theme/index.js";
function z({
  icon: e,
  value: r,
  name: t,
  url: a = "",
  animated: o = !1,
  LinkComponent: s = x,
  prefix: l = "/images",
  iconColor: p = "#222222",
  iconStyle: c = {}
}) {
  const n = /* @__PURE__ */ m(d, { children: [
    /* @__PURE__ */ i("div", { className: "metric__image", children: /* @__PURE__ */ i(
      h,
      {
        name: e,
        alt: typeof t == "string" ? t : "",
        size: 30,
        prefix: l,
        color: p,
        style: c
      }
    ) }),
    /* @__PURE__ */ m("div", { children: [
      /* @__PURE__ */ i(
        "div",
        {
          className: `metric__number ${o ? "metric__number--animated" : ""}`,
          dangerouslySetInnerHTML: { __html: r }
        }
      ),
      /* @__PURE__ */ i("div", { className: "metric__name", children: t })
    ] })
  ] });
  return /* @__PURE__ */ i(g, { children: a ? /* @__PURE__ */ i(s, { to: a, children: n }) : n });
}
const g = f("div")`
  border-left: 1px solid ${(e) => e.theme.palette.divider};
  padding: 10px 0 10px 16px;
  @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
    padding: 0 0 0 8px;
  }

  display: flex;
  justify-items: center;
  align-items: flex-start;

  a {
    display: flex;
    justify-items: center;
    align-items: flex-start;
  }

  .metric__image {
    margin-right: 8px;
  }

  .metric__number {
    margin-bottom: 8px;
    font-size: ${(e) => e.size === "small" ? 32 : 36}px;
    font-weight: 600;
    line-height: 36px;
    color: ${(e) => e.theme.palette.text.primary};

    small {
      font-size: 12px;
      line-height: 12px;
    }

    @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
      font-size: ${(e) => e.size === "small" ? 24 : 28}px;
      line-height: ${(e) => e.size === "small" ? 24 : 28}px;
      margin-bottom: 2px;
    }
  }

  .metric__number--animated {
    animation-name: blink-opacity;
    animation-duration: 250ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    background-color: transparent !important;
  }

  .metric__name {
    font-size: 14px;
    text-transform: capitalize;
    line-height: 1.2;
    font-weight: 500;
    color: ${(e) => e.theme.palette.text.primary};
    @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
      font-size: 10px;
      line-height: 1;
    }
  }

  @keyframes blink-opacity {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }
`;
export {
  z as default
};
