"use client";
import { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { cn } from '@/lib/utils';
import { jsx } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = /* @__PURE__ */ __name((event) => {
      setPrefersReducedMotion(event.matches);
    }, "handleChange");
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  return prefersReducedMotion;
}
__name(usePrefersReducedMotion, "usePrefersReducedMotion");
var iconPaths = {
  loading: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83",
  heart: [
    "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
    "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
  ],
  star: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z",
  hamburger: ["M3 12h18M3 6h18M3 18h18", "m6 6 12 12M6 18 18 6"],
  arrow: "M5 12l14 0m-7 -7l7 7l-7 7",
  check: "m9 12 2 2 4-4",
  x: "m18 6-12 12M6 6l12 12"
};
var animationVariants = {
  spin: {
    animate: {
      rotate: 360,
      transition: {
        duration: 1,
        repeat: Infinity,
        ease: "linear"
      }
    }
  },
  pulse: {
    animate: {
      scale: [1, 1.2, 1],
      transition: {
        duration: 1,
        repeat: Infinity,
        ease: "easeInOut"
      }
    }
  },
  bounce: {
    animate: {
      y: [0, -10, 0],
      transition: {
        duration: 0.6,
        repeat: Infinity,
        ease: "easeInOut"
      }
    }
  },
  draw: {
    initial: { pathLength: 0, opacity: 0 },
    animate: {
      pathLength: 1,
      opacity: 1,
      transition: { duration: 2, ease: "easeInOut" }
    }
  },
  hover: {
    whileHover: {
      scale: 1.1,
      transition: { duration: 0.2 }
    }
  }
};
var hoverVariants = {
  scale: { scale: 1.2 },
  rotate: { rotate: 15 },
  glow: { filter: "drop-shadow(0 0 8px currentColor)" },
  shake: { x: [-2, 2, -2, 2, 0] }
};
var clickVariants = {
  scale: { scale: 0.9 },
  rotate: { rotate: 180 },
  ripple: { scale: [1, 1.3, 1] }
};
function MorphingPath({
  paths,
  duration,
  strokeWidth = 2,
  autoAnimate,
  repeat,
  onComplete
}) {
  const [currentPathIndex, setCurrentPathIndex] = useState(0);
  useEffect(() => {
    if (!autoAnimate || paths.length < 2) return;
    const interval = setInterval(() => {
      setCurrentPathIndex((prev) => {
        const next = (prev + 1) % paths.length;
        if (next === 0 && !repeat) {
          clearInterval(interval);
          onComplete?.();
        }
        return next;
      });
    }, duration);
    return () => clearInterval(interval);
  }, [autoAnimate, paths.length, duration, repeat, onComplete]);
  return /* @__PURE__ */ jsx(
    motion.path,
    {
      d: paths[currentPathIndex],
      fill: "none",
      stroke: "currentColor",
      strokeWidth,
      strokeLinecap: "round",
      strokeLinejoin: "round",
      animate: { d: paths[currentPathIndex] },
      transition: { duration: duration / 1e3, ease: "easeInOut" }
    }
  );
}
__name(MorphingPath, "MorphingPath");
function DrawingPath({
  path,
  duration,
  strokeWidth = 2,
  progress,
  autoAnimate
}) {
  const pathRef = useRef(null);
  const [pathLength, setPathLength] = useState(0);
  useEffect(() => {
    if (pathRef.current) {
      const length = pathRef.current.getTotalLength();
      setPathLength(length);
    }
  }, [path]);
  const animatedLength = progress !== void 0 ? pathLength * progress : pathLength;
  return /* @__PURE__ */ jsx(
    motion.path,
    {
      ref: pathRef,
      d: path,
      fill: "none",
      stroke: "currentColor",
      strokeWidth,
      strokeLinecap: "round",
      strokeLinejoin: "round",
      initial: { pathLength: 0 },
      animate: autoAnimate ? { pathLength: 1 } : { pathLength: animatedLength / pathLength },
      transition: { duration: duration / 1e3, ease: "easeInOut" },
      style: {
        strokeDasharray: pathLength,
        strokeDashoffset: pathLength - animatedLength
      }
    }
  );
}
__name(DrawingPath, "DrawingPath");
function LoadingSpinner({
  size,
  strokeWidth = 2
}) {
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      animate: { rotate: 360 },
      transition: { duration: 1, repeat: Infinity, ease: "linear" },
      style: { width: size, height: size },
      children: /* @__PURE__ */ jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
        "circle",
        {
          cx: "12",
          cy: "12",
          r: "10",
          stroke: "currentColor",
          strokeWidth,
          strokeLinecap: "round",
          strokeDasharray: "60 40",
          opacity: "0.3"
        }
      ) })
    }
  );
}
__name(LoadingSpinner, "LoadingSpinner");
function AnimatedIcon({
  icon = "loading",
  paths,
  animation = "spin",
  size = 24,
  color = "currentColor",
  duration = 1e3,
  autoAnimate = true,
  repeat = true,
  className,
  style,
  onAnimationComplete,
  onClick,
  interactive = true,
  hoverAnimation = "scale",
  clickAnimation = "scale",
  customVariants,
  viewBox = "0 0 24 24",
  strokeWidth = 2,
  loading = false,
  progress
}) {
  const [isHovered, setIsHovered] = useState(false);
  const [isClicked, setIsClicked] = useState(false);
  const prefersReducedMotion = usePrefersReducedMotion();
  const variants = customVariants || animationVariants[animation] || {};
  const shouldAnimate = autoAnimate && !prefersReducedMotion;
  const getIconPaths = /* @__PURE__ */ __name(() => {
    if (paths) {
      return Array.isArray(paths) ? paths : [paths];
    }
    const builtInPath = iconPaths[icon];
    return Array.isArray(builtInPath) ? builtInPath : [builtInPath];
  }, "getIconPaths");
  const iconPathsArray = getIconPaths();
  const handleClick = /* @__PURE__ */ __name(() => {
    if (!interactive) return;
    setIsClicked(true);
    setTimeout(() => setIsClicked(false), 200);
    onClick?.();
  }, "handleClick");
  const getHoverVariant = /* @__PURE__ */ __name(() => {
    if (!interactive || !isHovered) return {};
    return hoverVariants[hoverAnimation] || {};
  }, "getHoverVariant");
  const getClickVariant = /* @__PURE__ */ __name(() => {
    if (!interactive || !isClicked) return {};
    return clickVariants[clickAnimation] || {};
  }, "getClickVariant");
  if (loading) {
    return /* @__PURE__ */ jsx(LoadingSpinner, { size, strokeWidth });
  }
  const renderIcon = /* @__PURE__ */ __name(() => {
    if (animation === "morph" && iconPathsArray.length > 1) {
      return /* @__PURE__ */ jsx(
        MorphingPath,
        {
          paths: iconPathsArray,
          duration,
          strokeWidth,
          autoAnimate: shouldAnimate,
          repeat,
          onComplete: onAnimationComplete
        }
      );
    }
    if (animation === "draw") {
      return /* @__PURE__ */ jsx(
        DrawingPath,
        {
          path: iconPathsArray[0],
          duration,
          strokeWidth,
          progress,
          autoAnimate: shouldAnimate
        }
      );
    }
    return iconPathsArray.map((path, index) => /* @__PURE__ */ jsx(
      motion.path,
      {
        d: path,
        fill: icon === "heart" ? "currentColor" : "none",
        stroke: icon === "heart" ? "none" : "currentColor",
        strokeWidth,
        strokeLinecap: "round",
        strokeLinejoin: "round"
      },
      index
    ));
  }, "renderIcon");
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      className: cn(
        "inline-flex items-center justify-center",
        interactive && "cursor-pointer",
        className
      ),
      style: {
        width: size,
        height: size,
        color,
        ...style
      },
      onClick: handleClick,
      onMouseEnter: () => setIsHovered(true),
      onMouseLeave: () => setIsHovered(false),
      variants,
      animate: shouldAnimate ? "animate" : "initial",
      whileHover: !prefersReducedMotion ? getHoverVariant() : {},
      whileTap: !prefersReducedMotion ? getClickVariant() : {},
      onAnimationComplete,
      children: /* @__PURE__ */ jsx(
        "svg",
        {
          width: "100%",
          height: "100%",
          viewBox,
          fill: "none",
          xmlns: "http://www.w3.org/2000/svg",
          children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderIcon() })
        }
      )
    }
  );
}
__name(AnimatedIcon, "AnimatedIcon");
var AnimatedIconPresets = {
  /**
   * Spinning loading indicator
   */
  Spinner: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "loading", animation: "spin", ...props }), "Spinner"),
  /**
   * Pulsing heart
   */
  HeartBeat: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "heart", animation: "pulse", color: "#ef4444", ...props }), "HeartBeat"),
  /**
   * Morphing hamburger to X
   */
  MenuToggle: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "hamburger", animation: "morph", ...props }), "MenuToggle"),
  /**
   * Drawing checkmark
   */
  CheckDraw: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "check", animation: "draw", color: "#10b981", ...props }), "CheckDraw"),
  /**
   * Bouncing star
   */
  BounceStar: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "star", animation: "bounce", color: "#fbbf24", ...props }), "BounceStar"),
  /**
   * Interactive arrow
   */
  HoverArrow: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedIcon, { icon: "arrow", hoverAnimation: "scale", interactive: true, ...props }), "HoverArrow")
};
var icon_default = AnimatedIcon;

export { AnimatedIcon, AnimatedIconPresets, icon_default as default };
