import { IProps } from "@/common/Iprops.interface"
import { useEffect, useRef, useState } from "react"
import {gsap} from 'gsap'
interface LazyImgType extends IProps{
    img:any
    animate?:string
}

export const LazyImg =(props:LazyImgType)=>{
    const {img,className,animate}=props
    const [show,setShow] = useState(false)
    const imgbox = useRef(null)
    const loaded = (e:any)=>{
        if(e){
            setShow(true)
        }
    }
    useEffect(()=>{
        switch(animate){
            case 'contact':
                gsap.from(imgbox.current,{opacity:0,x:-300,duration:0.6})
                break;
            case 'baas33':
                gsap.from(imgbox.current,{opacity:0.1,duration:0.6})
            break;
            default:
                gsap.from(imgbox.current,{opacity:0,y:300,duration:0.8})
            break
        }
       
    },[])
    return(
        <img src={img} ref={imgbox} className={`${show?" visible opacity-100":" invisible"} ${className}`} onLoad={loaded}/>
    )
}