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

import './article.scss';

const propTypes = {
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ]),
  className: PropTypes.string,
  innerHTML: PropTypes.string
};

const defaultProps = {
  component: 'article',
  className: undefined,
  innerHTML: undefined
};

const Article = ({
 className, component: Component, innerHTML, ...props
}) => {
  if (innerHTML) {
    return (
      <Component
        className={className}
        dangerouslySetInnerHTML={{ __html: innerHTML }}
        styleName="base"
        {...props}
      />
    );
  }
  return (
    <Component
      className={className}
      styleName="base"
      {...props}
    />
  );
};

Article.propTypes = propTypes;
Article.defaultProps = defaultProps;

export default Article;
