import { useEffect } from 'react'
import React from "react";


export default function CursorEffect(){
  useEffect(()=>{
    const cursor = document.createElement('div')
    cursor.className = 'cursor-effect hidden'
    document.body.appendChild(cursor)

    const move = (e)=>{
      cursor.style.left = e.pageX + 'px'
      cursor.style.top = e.pageY + 'px'
      cursor.classList.remove('hidden')
      cursor.style.transform = 'translate(-50%,-50%) scale(1)'
    }
    const leave = ()=>{ cursor.classList.add('hidden') }
    document.addEventListener('mousemove', move)
    document.addEventListener('mouseleave', leave)
    return ()=>{
      document.removeEventListener('mousemove', move)
      document.removeEventListener('mouseleave', leave)
      cursor.remove()
    }
  },[])
  return null
}
