import React from 'react';
import PropTypes from 'prop-types';
import LazyLoad from 'react-lazyload';

const Placeholder = () => {
  return <div>图片正在加载中。。。</div>;
};

const LazyImage = ({ offset, image, height, throttle, placeholder }) => {
  return (
    <>
      <LazyLoad
        once={true}
        throttle={throttle}
        offset={offset}
        height={height}
        placeholder={placeholder}
      >
        <img alt="" src={image} />
      </LazyLoad>
    </>
  );
};

LazyImage.propTypes = {
  image: PropTypes.string.isRequired,
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
  placeholder: PropTypes.node,
};

LazyImage.defaultProps = {
  offset: 0,
  height: 300,
  throttle: 200,
  placeholder: <Placeholder />,
};

export default LazyImage;