TEMPLATES & FRAMER OVERRIDES

import { animate } from "framer-motion";
import React, { useEffect, useRef } from "react";
import type { ComponentType } from "react";

export function withHoverTextAnimation(
    Component
): ComponentType {
    return function HoverTextAnimationOverride(props) {
        const componentRef = useRef<HTMLDivElement>(null);

        // Function to pre-wrap text in spans
        const wrapTextInSpans = () => {
            if (!componentRef.current) return;

            // Select all paragraphs within the component
            const paragraphs = Array.from(componentRef.current.querySelectorAll("p"));

            paragraphs.forEach((paragraph) => {
                // Skip if already processed
                if (paragraph.hasAttribute("data-animated")) return;

                const letters = Array.from(paragraph.textContent).map((letter) => {
                    const span = document.createElement("span");
                    span.textContent = letter;
                    span.style.display = "inline-block"; // Prevent layout shift
                    span.style.whiteSpace = "pre"; // Preserve spacing
                    return span;
                });

                // Replace the paragraph text with the spans
                paragraph.innerHTML = "";
                letters.forEach((span) => paragraph.appendChild(span));

                // Mark paragraph as processed
                paragraph.setAttribute("data-animated", "true");
            });
        };

        const animateText = (direction: "enter" | "leave") => {
            if (!componentRef.current) return;

            // Select all paragraphs within the component
            const paragraphs = Array.from(componentRef.current.querySelectorAll("p"));

            paragraphs.forEach((paragraph) => {
                // Get the spans inside the paragraph
                const spans = Array.from(paragraph.querySelectorAll("span"));

                // Animate each letter in order
                spans.forEach((span, index) => {
                    const delay = index * 0.015; // 15ms delay per letter

                    animate(
                        span,
                        {
                            transform:
                                direction === "enter"
                                    ? "translateY(-100%)" // Move up on mouseEnter
                                    : "translateY(0)", // Move back down on mouseLeave
                        },
                        {
                            duration: 0.5, // 0.5s duration
                            delay, // Stagger delay
                            ease: [0.7, 0, 0.3, 1], // Accentuated easing
                        }
                    );
                });
            });
        };

        const handleMouseEnter = () => animateText("enter");
        const handleMouseLeave = () => animateText("leave");

        useEffect(() => {
            wrapTextInSpans(); // Pre-wrap text in spans on component mount
        }, []);

        return (
            <div
                ref={componentRef}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                style={{ cursor: "pointer" }} // Optional styling
            >
                <Component {...props} />
            </div>
        );
    };
}