import type { ComponentType } from "react"
import { motion } from "framer-motion"

export function withMovingLinesHover(Component): ComponentType {
    return (props) => {
        const hoverVariants = {
            initial: { "--_p": "25%" },
            hover: { "--_p": "75%" },
        }

        return (
            <Component
                {...props}
                as={motion.div}
                initial="initial"
                whileHover="hover"
                style={{
                    ...props.style,
                    // Change width of stroke
                    "--g": "2px",
                    "--b": "2px",
                    //Change the color here//
                    "--c": "#97E025",
                    padding: "calc(var(--g) + var(--b))",
                    "--_c": "#0000 0 25%, var(--c) 0 50%",
                    "--_g1":
                        "repeating-linear-gradient(90deg ,var(--_c)) repeat-x",
                    "--_g2":
                        "repeating-linear-gradient(180deg,var(--_c)) repeat-y",
                    background:
                        "var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%)," +
                        "var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%)",
                    backgroundSize: "200% var(--b),var(--b) 200%",
                    transition: "0.15s ease-out", // Updated transition property
                }}
                variants={hoverVariants}
            >
                {props.children}
            </Component>
        )
    }
}