import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Media from '../../Media';

import './card-banner.scss';

const CardBanner = ({ className, horizontal, padded, size, ...props }) => (
  <Media
    className={className}
    styleName={classNames('banner', {
      'banner--vertical': !horizontal,
      [`banner--horizontal-${size}`]: horizontal && size,
      'banner--padded': padded
    })}
    {...props}
  />
);

CardBanner.propTypes = {
  /** @ignore */
  className: PropTypes.bool,
  horizontal: PropTypes.bool,
  padded: PropTypes.bool,
  size: PropTypes.oneOf(['sm', 'md', 'lg'])
};

CardBanner.defaultProps = {
  className: undefined,
  horizontal: false,
  padded: false,
  type: 'image',
  size: 'md'
};

CardBanner.componentName = 'CardBanner';

export default CardBanner;
