import { jsxs, jsx } 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%)`;
}
/**
 * GridPattern renders an SVG-based 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">
 *   <GridPattern size={48} color="var(--color-border)" fade animated />
 *   <div className="relative z-10">Your content here</div>
 * </div>
 * ```
 */
const GridPattern = React__default.forwardRef(({ size = 40, strokeWidth = 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,
            }
            : {}),
    };
    const svgContent = (jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsxs("pattern", { id: patternId, x: "0", y: "0", width: size, height: size, patternUnits: "userSpaceOnUse", children: [jsx("line", { x1: size, y1: "0", x2: size, y2: size, stroke: color, strokeWidth: strokeWidth }), jsx("line", { x1: "0", y1: size, x2: size, y2: size, stroke: color, strokeWidth: strokeWidth })] }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }));
    const animatedSvgContent = enableAnimation ? (jsxs(motion.svg, { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", animate: {
            x: [0, size],
            y: [0, size],
        }, transition: {
            duration: 20,
            ease: "linear",
            repeat: Infinity,
        }, children: [jsx("defs", { children: jsxs("pattern", { id: patternId, x: "0", y: "0", width: size, height: size, patternUnits: "userSpaceOnUse", children: [jsx("line", { x1: size, y1: "0", x2: size, y2: size, stroke: color, strokeWidth: strokeWidth }), jsx("line", { x1: "0", y1: size, x2: size, y2: size, stroke: color, strokeWidth: strokeWidth })] }) }), jsx("rect", { x: -size, y: -size, width: `calc(100% + ${size * 2}px)`, height: `calc(100% + ${size * 2}px)`, fill: `url(#${patternId})` })] })) : null;
    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: enableAnimation ? animatedSvgContent : svgContent }));
});
GridPattern.displayName = "GridPattern";

export { GridPattern };
