import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../atoms/icon/Icon';

const propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  icon: PropTypes.string,
  content: PropTypes.node,
};

const defaultProps = {
  children: '',
  className: '',
  icon: '',
  content: '',
};

export const EmptyState = ({
  children,
  className,
  icon,
  content,
}) => (
  <div className={`sui-m-empty-state ${className}`}>
    <p>
      { icon && (
        <Icon name={icon} position="start" />
      )}
      {content}
    </p>
    {children}
  </div>
);

EmptyState.propTypes = propTypes;
EmptyState.defaultProps = defaultProps;
