import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useId, useMemo } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';

/**
 * Build a CSS mask-image value for the given fade direction and size.
 */
function buildMaskImage(direction, fadeSize) {
    const stop = Math.max(0, Math.min(100, fadeSize));
    if (direction === "radial") {
        return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
    }
    const directionMap = {
        top: "to top",
        bottom: "to bottom",
        left: "to left",
        right: "to right",
    };
    return `linear-gradient(${directionMap[direction]}, black ${100 - stop}%, transparent 100%)`;
}
/**
 * DotPattern renders an SVG-based dot grid background pattern.
 *
 * Use it as an absolute-positioned decorative background inside a container
 * with `position: relative`. The pattern is fully non-interactive
 * (`pointer-events: none`) and sits at `z-index: 0` by default.
 *
 * @example
 * ```tsx
 * <div className="relative overflow-hidden h-96">
 *   <DotPattern spacing={24} dotSize={1.5} fade animated />
 *   <div className="relative z-10">Your content here</div>
 * </div>
 * ```
 */
const DotPattern = React__default.forwardRef(({ spacing = 20, dotSize = 1, color = "var(--color-border)", fade = true, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
    const patternId = useId();
    const shouldReduceMotion = useReducedMotion();
    const enableAnimation = animated && !shouldReduceMotion;
    const maskImage = useMemo(() => (fade ? buildMaskImage(fadeDirection, fadeSize) : undefined), [fade, fadeDirection, fadeSize]);
    const containerStyle = {
        ...style,
        ...(maskImage
            ? {
                maskImage,
                WebkitMaskImage: maskImage,
            }
            : {}),
    };
    // Center the dot within each cell
    const cx = spacing / 2;
    const cy = spacing / 2;
    const dotElement = enableAnimation ? (jsx(motion.circle, { cx: cx, cy: cy, r: dotSize, fill: color, animate: {
            opacity: [0.4, 1, 0.4],
        }, transition: {
            duration: 4,
            ease: "easeInOut",
            repeat: Infinity,
        } })) : (jsx("circle", { cx: cx, cy: cy, r: dotSize, fill: color }));
    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsx("pattern", { id: patternId, x: "0", y: "0", width: spacing, height: spacing, patternUnits: "userSpaceOnUse", children: dotElement }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }) }));
});
DotPattern.displayName = "DotPattern";

export { DotPattern };
