import { jsxs as r, jsx as o, Fragment as a } from "react/jsx-runtime";
import { useId as T } from "react";
import { cn as C } from "../../../lib/utils.js";
const g = 2.8, A = "10 14", E = "1.5 6", I = "0.01 1000", R = 4.5, x = 1.8, e = 0.55, c = 0.32;
function S({
  paths: l,
  className: y,
  variant: p = "flow",
  lineStyle: O,
  clusterSide: t,
  animated: f = !0,
  ...u
}) {
  const h = l.length, d = O ?? (p === "dot" ? "dotted" : "dashed"), m = d === "dotted" ? E : A, k = d === "dotted" ? "animate-gateway-flow-dotted" : "animate-gateway-flow", s = `flow-${T().replace(/[^a-zA-Z0-9]/g, "")}`, w = t ? `url(#${s}-track)` : "currentColor", D = t ? `url(#${s}-dot)` : "currentColor";
  return /* @__PURE__ */ r(
    "svg",
    {
      "aria-hidden": !0,
      className: C("shrink-0 overflow-visible text-success", y),
      "data-slot": "flow-connector",
      preserveAspectRatio: "none",
      viewBox: "0 0 100 100",
      ...u,
      children: [
        /* @__PURE__ */ o("title", { children: "Connection flow" }),
        t ? /* @__PURE__ */ r("defs", { children: [
          /* @__PURE__ */ o(
            "linearGradient",
            {
              gradientUnits: "userSpaceOnUse",
              id: `${s}-track`,
              x1: "0",
              x2: "100",
              y1: "50",
              y2: "50",
              children: t === "start" ? /* @__PURE__ */ r(a, { children: [
                /* @__PURE__ */ o("stop", { offset: "0", stopColor: "currentColor", stopOpacity: 0 }),
                /* @__PURE__ */ o(
                  "stop",
                  {
                    offset: c,
                    stopColor: "currentColor",
                    stopOpacity: e
                  }
                ),
                /* @__PURE__ */ o(
                  "stop",
                  {
                    offset: "1",
                    stopColor: "currentColor",
                    stopOpacity: e
                  }
                )
              ] }) : /* @__PURE__ */ r(a, { children: [
                /* @__PURE__ */ o(
                  "stop",
                  {
                    offset: "0",
                    stopColor: "currentColor",
                    stopOpacity: e
                  }
                ),
                /* @__PURE__ */ o(
                  "stop",
                  {
                    offset: 1 - c,
                    stopColor: "currentColor",
                    stopOpacity: e
                  }
                ),
                /* @__PURE__ */ o("stop", { offset: "1", stopColor: "currentColor", stopOpacity: 0 })
              ] })
            }
          ),
          /* @__PURE__ */ o(
            "linearGradient",
            {
              gradientUnits: "userSpaceOnUse",
              id: `${s}-dot`,
              x1: "0",
              x2: "100",
              y1: "50",
              y2: "50",
              children: t === "start" ? /* @__PURE__ */ r(a, { children: [
                /* @__PURE__ */ o("stop", { offset: "0", stopColor: "currentColor", stopOpacity: 0 }),
                /* @__PURE__ */ o(
                  "stop",
                  {
                    offset: c,
                    stopColor: "currentColor",
                    stopOpacity: 1
                  }
                ),
                /* @__PURE__ */ o("stop", { offset: "1", stopColor: "currentColor", stopOpacity: 1 })
              ] }) : /* @__PURE__ */ r(a, { children: [
                /* @__PURE__ */ o("stop", { offset: "0", stopColor: "currentColor", stopOpacity: 1 }),
                /* @__PURE__ */ o(
                  "stop",
                  {
                    offset: 1 - c,
                    stopColor: "currentColor",
                    stopOpacity: 1
                  }
                ),
                /* @__PURE__ */ o("stop", { offset: "1", stopColor: "currentColor", stopOpacity: 0 })
              ] })
            }
          )
        ] }) : null,
        l.map((i, n) => /* @__PURE__ */ o(
          "path",
          {
            className: C(
              "motion-reduce:animate-none",
              f && p === "flow" && k
            ),
            d: i,
            fill: "none",
            stroke: w,
            strokeDasharray: m,
            strokeLinecap: "round",
            strokeOpacity: t ? void 0 : e,
            strokeWidth: x,
            vectorEffect: "non-scaling-stroke"
          },
          `path-${n}`
        )),
        f && p === "dot" ? l.map((i, n) => /* @__PURE__ */ o(
          "path",
          {
            className: "animate-gateway-flow-dot motion-reduce:animate-none",
            d: i,
            fill: "none",
            pathLength: 100,
            stroke: D,
            strokeDasharray: I,
            strokeLinecap: "round",
            strokeOpacity: t ? void 0 : 1,
            strokeWidth: R,
            style: {
              animationDelay: `${n * g / Math.max(h, 1)}s`
            },
            vectorEffect: "non-scaling-stroke"
          },
          `dot-${n}`
        )) : null
      ]
    }
  );
}
export {
  S as FlowConnector
};
