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

/**
 * NoiseOverlay Component
 *
 * An SVG feTurbulence-based noise/grain texture overlay that adds a
 * matte or film-like quality to surfaces. Renders as an absolute-positioned,
 * non-interactive layer over its parent container.
 *
 * The parent container should have `position: relative` and `overflow: hidden`.
 *
 * @example
 * ```tsx
 * <div className="relative overflow-hidden bg-gray-900 rounded-lg p-6">
 *   <NoiseOverlay opacity={0.2} blendMode="soft-light" />
 *   <span className="relative z-10">Content with grain texture</span>
 * </div>
 * ```
 *
 * @example Animated grain
 * ```tsx
 * <div className="relative overflow-hidden bg-indigo-600 rounded-lg p-8">
 *   <NoiseOverlay animated frequency={0.8} octaves={3} />
 *   <h2 className="relative z-10 text-white">Film grain effect</h2>
 * </div>
 * ```
 */
const NoiseOverlay = React__default.forwardRef(({ opacity = 0.15, frequency = 0.65, octaves = 4, blendMode = "overlay", animated = false, className, style, ...props }, ref) => {
    const filterId = useId();
    const shouldReduceMotion = useReducedMotion();
    const turbulenceRef = useRef(null);
    const isAnimating = animated && !shouldReduceMotion;
    useEffect(() => {
        if (!isAnimating || !turbulenceRef.current)
            return;
        let seed = 0;
        const step = () => {
            var _a;
            seed += 1;
            if (seed > 999)
                seed = 0;
            (_a = turbulenceRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("seed", String(seed));
        };
        // Animate at roughly 8fps for a subtle film-grain flicker
        const intervalId = setInterval(step, 125);
        return () => {
            clearInterval(intervalId);
        };
    }, [isAnimating]);
    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none", className), style: {
            mixBlendMode: blendMode,
            opacity,
            ...style,
        }, "aria-hidden": "true", ...props, children: jsxs("svg", { className: "absolute inset-0 w-full h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: [jsx("filter", { id: filterId, children: jsx("feTurbulence", { ref: turbulenceRef, type: "fractalNoise", baseFrequency: frequency, numOctaves: octaves, stitchTiles: "stitch", seed: 0 }) }), jsx("rect", { width: "100%", height: "100%", filter: `url(#${filterId})` })] }) }));
});
NoiseOverlay.displayName = "NoiseOverlay";

export { NoiseOverlay };
