import PropTypes from 'prop-types';
import React from 'react';
import { Header } from 'semantic-ui-react';

/* Interface */
const propTypes = {
  content: PropTypes.string.isRequired,
  level: PropTypes.number,
};

/* Defaults */
const defaultProps = {
  content: '',
  level: 3,
};

/**
 * Renders content from the `storyshare/heading` block
 * @private
 * @param {Object} props - React component props.
 * @returns {Object} React element.
 */
export const Heading = ({ content, level }) => (
  <Header as={ `h${level}` }>{ content }</Header>
);

Heading.defaultProps = defaultProps;
Heading.propTypes = propTypes;

export default Heading;
