import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import LazyLoad from 'react-lazyload';
import styles from './image.scss';
import Load from '../Load';

const cx = classnames.bind(styles);

const Placeholder = () => (
  <div className={cx('placeholder')}>
    <Load />
  </div>
);

const Image = ({ height, width, src, alt }) => (
  <div
    style={{
      height,
      width,
    }}
  >
    <LazyLoad height={height} width={width} once placeholder={<Placeholder />}>
      <img className={cx('image')} alt={alt} src={src} />
    </LazyLoad>
  </div>
);

Image.defaultProps = {
  height: '100%',
  width: '100%',
};

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  height: PropTypes.string,
  width: PropTypes.string,
};

export default Image;