import PropTypes from 'prop-types';
import React from 'react';
import { List as SemanticList } from 'semantic-ui-react';

import childrenFromHtml from '../../childrenFromHtml';
import RichText from '../../RichText';

/* Interface */
const propTypes = {
  /** <RichText> content to render */
  content: PropTypes.string.isRequired,
  ordered: PropTypes.bool,
};

/* Defaults */
const defaultProps = {
  content: '',
  ordered: false,
};

/**
 * Renders content from the `storyshare/list` block
 * @private
 * @param {Object} props - React component props.
 * @returns {Object} React element.
 */
export const List = ({ content, ordered }) => (
  <SemanticList bulleted={ !ordered } ordered={ ordered }>
    <RichText>
      { childrenFromHtml(content) }
    </RichText>
  </SemanticList>
);

List.defaultProps = defaultProps;
List.propTypes = propTypes;

export default List;
