import { jsxs as E, jsx as r } from "react/jsx-runtime";
import { useDynamicImport as w } from "./index-use-dynamic-import.js";
import { classNames as e } from "./index-classNames.js";
import { parseCssVariable as d } from "./index-css-variables-parser.js";
import { Render as F } from "./index-Render.js";
import { Text as N, FontWeights as C, TextTypes as Y } from "./index-Text.js";
import "react";
import t from "./index-ArcGauge.module.scss.js";
const W = (g) => {
  const {
    value: p,
    color1: $ = "var(--n500)",
    color2: x = "var(--n300)",
    text: s,
    mask: h = "full"
  } = g, {
    SvgIcon: v
  } = w(`reputation/rep-${h}-gauge-mask.svg`), u = d($), f = d(x), y = (n, i, c, l) => {
    const o = l * Math.PI / 180;
    return {
      x: n + c * Math.cos(o),
      y: i + c * Math.sin(o)
    };
  }, a = Math.max(0, Math.min(100, p)), M = (n) => {
    if (a === 0)
      return "M 120 120 L 3 120 A 117 117 0 0 0 3 120 Z";
    const A = 180 - a / 100 * 180, m = y(120, 120, 117, -A);
    return `M 120 120 L ${m.x.toFixed(2)} ${m.y.toFixed(2)} A 117 117 0 0 0 3 120 Z`;
  };
  return E("div", {
    className: e(t.container),
    children: [r("svg", {
      className: t.arcGauge,
      viewBox: "0 0 240 120",
      xmlns: "http://www.w3.org/2000/svg",
      preserveAspectRatio: "xMidYMid meet",
      children: r("path", {
        d: "M 3 120 A 117 117 0 0 1 237 120",
        fill: "var(--n200)"
      })
    }), r("div", {
      className: e(t.arcGauge),
      style: {
        background: `conic-gradient(from 270deg at 50% 100%, ${u} 0deg, ${f} ${a / 100 * 180}deg)`,
        clipPath: `path('${M()}')`
      }
    }), r("img", {
      src: v,
      className: e(t.overlayMask),
      alt: ""
    }), r(F, {
      if: !!s,
      children: r("div", {
        className: e(t.textContainer),
        children: r(N, {
          type: Y.textIntro,
          fontWeight: C.bold,
          textAlign: "center",
          className: e(t.text),
          children: s
        })
      })
    })]
  });
};
export {
  W as ArcGauge
};
