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

const propTypes = {
  title: PropTypes.node,
  children: PropTypes.node,
  image: PropTypes.node,
  tag: PropTypes.elementType,
};

const defaultProps = {
  title: 'No items',
  children: '',
  image: '',
  tag: 'div',
};

export const PageEmptyState = (({
  title,
  children,
  image,
  tag: Tag,
}) => {
  const IllustrationRender = () => (
    <>
      {
        image
          ? <div className="sui-l-page-empty-state__illustration" style={{ backgroundImage: `url(${image})` }} />
          : <div className="sui-l-page-empty-state__illustration" />
      }
    </>
  );

  return (
    <Tag className="sui-l-page-empty-state">
      <div className="sui-l-page-empty-state__inner">
        <div className="sui-l-page-empty-state__content">
          <h2>
            {title}
          </h2>
          {children}
        </div>
        <IllustrationRender />
      </div>
    </Tag>
  );
});

PageEmptyState.propTypes = propTypes;
PageEmptyState.defaultProps = defaultProps;
