import { IProps } from "@/common/Iprops.interface";
import * as React from 'react';
import { PointerEventHandler, useMemo, useRef } from 'react';
import { throttle as _throttle } from 'lodash';
export interface HoverBoxType extends IProps {
   
}

export default function HoverBox (props: HoverBoxType) {
  const item = useRef(null)

  const {children, className} = props;
  const moveIn = _throttle((e:any)=>{
      e.stopPropagation();
      const target =item.current! as HTMLElement
      const coverLayer = target.nodeName === 'LI'?target.children[0]:target
      if(coverLayer){
        const isHidden= Array.from(coverLayer.classList.values()).includes('hidden')
        if(isHidden){
            coverLayer.classList.remove(...['hidden'])
        }
      } 
},550)
 const moveOut = _throttle((e:any)=>{

    e.stopPropagation();
    const target = item.current! as HTMLElement
    const coverLayer = target.nodeName === 'LI'?target.children[0]:target
    if(coverLayer){
      const isHidden= Array.from(coverLayer.classList.values()).includes('hidden')
      if(!isHidden){
          coverLayer.classList.add(...['hidden'])
      }
    }
 },550)
  return (
    <li
        ref={item}
        className={" hoverGlass " + " " +className }
        onPointerEnter={moveIn}
        onPointerLeave={moveOut}
    >
    <div className="absolute -z-[3] duration-150 hidden rounded-lg backdrop-filter blur-[2px] top-0 left-0 bg-white/10 border-2 border-white  w-full h-full px-5 py-5"></div>
    {children}
  </li>
  );
}
