import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useRef } from "react";
import useLavaLampSetup from "./LavaLamp.data";
import Styles from "./LavaLamp.module.scss";
/**
 * This component creates a calming visual effect that looks like a lava lamp, with floating bubbles that move around smoothly.
 */
export default function LavaLamp({ className, children, }) {
    const circleRef = useRef(null);
    const { relativeTo, d, circlesConfig } = useLavaLampSetup((cx, cy) => {
        const style = circleRef.current.style;
        style.cx = cx;
        style.cy = cy;
    }, (size) => {
        const style = circleRef.current.style;
        style.r = size;
    });
    const randomCircles = useMemo(() => {
        return circlesConfig.map(({ baseSize, startX, startY, translateX, translateY }) => (_jsx("circle", { r: baseSize + Math.random() * (baseSize / 2), fill: "#fff", cx: startX, cy: startY, children: _jsx("animateTransform", { additive: "sum", attributeName: "transform", attributeType: "XML", type: "translate", values: `0 0; ${translateX} ${translateY}; 0 0;`, dur: `${5 + Math.random() * 5}s`, repeatCount: "indefinite" }) })));
    }, [circlesConfig]);
    return (_jsxs("div", { ref: relativeTo, className: `${Styles.root} ${className}`, children: [d && (_jsxs("svg", { className: Styles.effect, viewBox: `0 0 ${d.width} ${d.height}`, children: [_jsxs("filter", { id: `goo-lava-lamp`, width: "10", height: "10", x: "0%", y: "0%", filterRes: "1", children: [_jsx("feGaussianBlur", { in: "SourceGraphic", result: "blur", stdDeviation: "40" }), _jsx("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -7", result: "goo" })] }), _jsx("mask", { id: `mask-lava-lamp`, children: _jsxs("g", { filter: `url(#${`goo-lava-lamp`})`, fill: "#fff", children: [randomCircles, _jsx("circle", { ref: circleRef, fill: "#fff" })] }) }), _jsx("defs", { children: _jsxs("radialGradient", { id: "grad1", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%", children: [_jsx("stop", { offset: "0%", style: {
                                        stopColor: "var(--lava-lamp-color-a)",
                                        stopOpacity: 1,
                                    } }), _jsx("stop", { offset: "67.33%", style: {
                                        stopColor: "var(--lava-lamp-color-b)",
                                        stopOpacity: 1,
                                    } }), _jsx("stop", { offset: "88.33%", style: {
                                        stopColor: "var(--lava-lamp-color-c)",
                                        stopOpacity: 1,
                                    } })] }) }), _jsx("rect", { x: "-50%", y: "-50%", mask: `url(#${`mask-lava-lamp`})`, width: "200%", height: "200%", style: { fill: "url(#grad1)" } })] })), _jsx("div", { children: children })] }));
}
//# sourceMappingURL=LavaLamp.js.map