"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Morphing Transition Atom Component
 * SVG wrapper for morphing animations using GSAP MorphSVGPlugin
 * Provides refs for animation control
 */
export const MorphingTransition = ({ wrapRef, svgRef, pathRef, gradientId = "morphin-gradient", gradientColors = {
    start: "#F86BDF",
    end: "#6B6BF8",
}, initialPath = "M0-18.1c0,0,117.3,6.1,221,0s190.7,3.5,264.3,0c53.4-2.6,145-0.1,271.4,0c59.3,0.1,208.2,0,332.5,0 c76.2,0,120.1-3,226.6,0c74.1,2.1,150.4,0,243.5,0c96.8,0,175.8,8.5,230.8,0c55.7-8.6,129.8,0,129.8,0V0H0V-18.1z", className = "morphin-wrap", testId, }) => {
    return (_jsx("div", { ref: wrapRef, className: className, "data-testid": testId, children: _jsxs("svg", { ref: svgRef, className: "morphin-svg", width: "100%", height: "100vh", preserveAspectRatio: "none", viewBox: "0 0 1920 1080", children: [_jsx("path", { ref: pathRef, fill: `url(#${gradientId})`, d: initialPath }), _jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: gradientColors.start, stopOpacity: "0.95" }), _jsx("stop", { offset: "100%", stopColor: gradientColors.end, stopOpacity: "0.95" })] }) })] }) }));
};
export default MorphingTransition;
