import React from 'react';
import classnames from 'classnames';
import 'styles/image.less';

class Image extends React.Component {
  render() {
    let {src, perfixCls, circle, radius, thumbnail, responsive, round, ...others} = this.props;
    if ((typeof radius) === 'number') {
      others.style = {
        borderRadius: radius
      }
    }
    
    let cls = classnames({
      [`${perfixCls}-circle`]: !!circle,
      [`${perfixCls}-radius`]: (typeof radius) === 'boolean',
      [`${perfixCls}-round`]: !!round,
      [`${perfixCls}-responsive`]: !!responsive,
      [`${perfixCls}-thumbnail`]: !!thumbnail
    });

    return (
      <img {...others} className={cls} src={src} alt=""/>
    )
  }
}
Image.defaultProps = {
  perfixCls: 'wrc-image'
};
Image.propTypes = {
  src: React.PropTypes.string.isRequired,
  // 圆形
  circle: React.PropTypes.bool,
  // 圆角
  radius: React.PropTypes.bool,
  // 椭圆
  round: React.PropTypes.bool,
  // 响应式
  responsive: React.PropTypes.bool,
  // 略缩图
  thumbnail: React.PropTypes.bool
};

export default Image;