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

// 👇 These are your controls 👇

const rotation = 42 // spin value
const duration = 3 // duration
const x = 7 // x movement
const rotationX = 10 // x rotation
const easing = "easeInOut" // easing

export function withFront(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                animate={{
                    rotateY: [rotation, -rotation, rotation],
                    x: [-x, x, -x],
                    rotateX: [-rotationX, rotationX, -rotationX],
                }}
                transition={{
                    duration: duration,
                    repeat: Infinity,
                    ease: easing,
                }}
            />
        )
    }
}
export function withBack(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                animate={{
                    rotateY: [-rotation, rotation, -rotation],
                    x: [x, -x, x],
                    rotateX: [rotationX, -rotationX, rotationX],
                }}
                transition={{
                    duration: duration,
                    repeat: Infinity,
                    ease: easing,
                }}
            />
        )
    }
}