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

export function withInwardBorderHover(Component): ComponentType {
    return (props) => {
        const hoverVariants = {
            initial: {
                transform: "translate(calc(var(--d)/-1), var(--d))",
                clipPath:
                    "polygon(var(--d) 0%, var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), 100% calc(100% - var(--d)), var(--d) calc(100% - var(--d)))",
            },
            hover: {
                transform: "translate(0, 0)",
                clipPath:
                    "polygon(0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%)",
            },
        }

        return (
            <Component
                {...props}
                as={motion.div}
                initial="initial"
                whileHover="hover"
                style={{
                    ...props.style,
                    "--c": "#3700FF",
                    "--b": ".1em",
                    "--d": "20px",
                    "--_s": "calc(var(--d) + var(--b))",
                    color: "var(--c)",
                    border: "solid #0000",
                    borderWidth: "var(--b) var(--b) var(--_s) var(--_s)",
                    background:
                        "conic-gradient(at left var(--d)  bottom var(--d), #0000 90deg, rgb(255 255 255 /0.3) 0 225deg, rgb(255 255 255 /0.6) 0) border-box, conic-gradient(at left var(--_s) bottom var(--_s), #0000 90deg, var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box",
                    transition: "0.5s",
                }}
                variants={hoverVariants}
            >
                {props.children}
            </Component>
        )
    }
}