"use client";
import * as React from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { cn } from '@hanzo/ui/lib/utils';
import { jsxs, jsx } from 'react/jsx-runtime';

var AnimatedTooltip = React.forwardRef(
  ({ className, content, children, delay = 0, ...props }, ref) => {
    const [isVisible, setIsVisible] = React.useState(false);
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("relative inline-block", className),
        onMouseEnter: () => setIsVisible(true),
        onMouseLeave: () => setIsVisible(false),
        ...props,
        children: [
          children,
          /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxs(
            motion.div,
            {
              initial: { opacity: 0, y: 10, scale: 0.95 },
              animate: { opacity: 1, y: 0, scale: 1 },
              exit: { opacity: 0, y: 10, scale: 0.95 },
              transition: {
                duration: 0.2,
                delay: delay / 1e3,
                ease: "easeOut"
              },
              className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-1.5 bg-popover text-popover-foreground text-sm rounded-md shadow-md whitespace-nowrap z-50",
              children: [
                content,
                /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover" })
              ]
            }
          ) })
        ]
      }
    );
  }
);
AnimatedTooltip.displayName = "AnimatedTooltip";

export { AnimatedTooltip };
