import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"

// Learn more: https://www.framer.com/docs/guides/overrides/

const useStore = createStore({
    border: "none",
})

export function withRainbowBorder(Component: ComponentType): ComponentType {
    const rainbowColors = [
        "red",
        "orange",
        "yellow",
        "green",
        "blue",
        "indigo",
        "violet",
    ]
    let currentIndex = 0
    const getNextColor = () => {
        currentIndex = (currentIndex + 1) % rainbowColors.length
        return rainbowColors[currentIndex]
    }

    return (props) => {
        const [store, setStore] = useStore()

        const animateBorder = () => {
            const nextColor = getNextColor()
            setStore({ border: `5px solid ${nextColor}` })
        }

        return (
            <Component
                {...props}
                style={{
                    border: store.border,
                }}
                onMouseEnter={animateBorder}
                onTouchStart={animateBorder}
            />
        )
    }
}