import { useState,  useEffect} from "react"

const Eyes = () => {
    const [rotate, setRotate] = useState(0);

    useEffect(() => {
        window.addEventListener("mousemove", (e) => {
            const mouseMoveX = e.clientX
            const mouseMoveY = e.clientY
            const deltaX = mouseMoveX  - window.innerWidth/2;
            const deltaY = mouseMoveY  - window.innerHeight/2;

            const angle = Math.atan2(deltaY, deltaX) * (180/Math.PI)
            setRotate(angle-180)
        })
    })


  return (
    <div className="w-full h-screen overflow-hidden">
        <div data-scroll data-scroll-speed="-0.8" className="w-full h-full relative bg-center bg-cover bg-[url('https://ochi.design/wp-content/uploads/2022/05/Top-Viewbbcbv-1-scaled.jpg')]">
            <div className="flex gap-10 absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[80%]">
                <div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
                    <div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
                        <p className="text-white uppercase text-3xl">play</p>
                        <div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
                            <div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
                        </div>
                    </div>
                </div>
                <div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
                    <div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
                        <p className="text-white uppercase text-3xl">play</p>
                        <div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
                            <div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Eyes