"use client";
'use strict';

var React = require('react');
var react = require('motion/react');
var utils = require('@hanzo/ui/lib/utils');
var jsxRuntime = require('react/jsx-runtime');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var AnimatedBeam = React__namespace.forwardRef(
  ({
    className,
    duration = 3,
    delay = 0,
    pathColor = "gray",
    pathWidth = 2,
    gradientStartColor = "#18CCFC",
    gradientStopColor = "#6344F5",
    containerRef,
    fromRef,
    toRef,
    ...props
  }, ref) => {
    const [pathD, setPathD] = React__namespace.useState("");
    React__namespace.useEffect(() => {
      if (!containerRef?.current || !fromRef?.current || !toRef?.current) return;
      const updatePath = /* @__PURE__ */ __name(() => {
        const containerRect = containerRef.current.getBoundingClientRect();
        const fromRect = fromRef.current.getBoundingClientRect();
        const toRect = toRef.current.getBoundingClientRect();
        const fromX = fromRect.left - containerRect.left + fromRect.width / 2;
        const fromY = fromRect.top - containerRect.top + fromRect.height / 2;
        const toX = toRect.left - containerRect.left + toRect.width / 2;
        const toY = toRect.top - containerRect.top + toRect.height / 2;
        const controlX = (fromX + toX) / 2;
        const controlY = Math.min(fromY, toY) - 50;
        setPathD(`M ${fromX} ${fromY} Q ${controlX} ${controlY} ${toX} ${toY}`);
      }, "updatePath");
      updatePath();
      window.addEventListener("resize", updatePath);
      return () => window.removeEventListener("resize", updatePath);
    }, [containerRef, fromRef, toRef]);
    return /* @__PURE__ */ jsxRuntime.jsxs(
      "svg",
      {
        ref,
        className: utils.cn("pointer-events-none absolute inset-0", className),
        ...props,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            "path",
            {
              d: pathD,
              stroke: pathColor,
              strokeWidth: pathWidth,
              fill: "none",
              strokeOpacity: 0.2
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            react.motion.path,
            {
              d: pathD,
              stroke: `url(#gradient-${gradientStartColor}-${gradientStopColor})`,
              strokeWidth: pathWidth,
              fill: "none",
              initial: { pathLength: 0 },
              animate: { pathLength: 1 },
              transition: {
                duration,
                delay,
                ease: "easeInOut",
                repeat: Infinity
              }
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
            "linearGradient",
            {
              id: `gradient-${gradientStartColor}-${gradientStopColor}`,
              x1: "0%",
              y1: "0%",
              x2: "100%",
              y2: "0%",
              children: [
                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: gradientStartColor }),
                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: gradientStopColor })
              ]
            }
          ) })
        ]
      }
    );
  }
);
AnimatedBeam.displayName = "AnimatedBeam";

exports.AnimatedBeam = AnimatedBeam;
