import { LazyLoadComponent,LazyLoadImage } from 'react-lazy-load-image-component';
import ReactImgix, {buildURL} from "react-imgix";
import PropTypes from "prop-types";
import styles from "./styles.module.scss";
import {useState} from "react";
const LazyImgix = ({ src,alt="",className="",blur=true, ...props}) => {
    const [loaded, setLoaded] = useState(false);
    const effectClass=blur?styles.blur:'';
    const effLoadedClass=blur?(loaded?styles.loaded:''):'';
    if (props.width!=null){
        let devicePixelRatio=window.devicePixelRatio;
        if (devicePixelRatio<1)devicePixelRatio=1;
        props.width=Math.ceil(props.width/devicePixelRatio);
    }
    return (
        <LazyLoadComponent className={'lazy-image'}>
            <ReactImgix
                className={`${className} ${effectClass} ${effLoadedClass}`}
                src={src}
                alt={alt}
                htmlAttributes={{
                    onLoad: () => {
                        setLoaded(true);
                    },
                }}
                {...props}
            ></ReactImgix>
        </LazyLoadComponent>
    )
}
LazyImgix.propTypes = {
    src:PropTypes.string.isRequired
}
export default LazyImgix;