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

import BlockContent from '../../modules/BlockContent';
import createItemComponent, {
  propTypes as ItemPropTypes,
} from './createItemComponent';

/* Interface */
const propTypes = {
  /** ID of post to load. */
  id: ItemPropTypes.id,

  /** The post if already available. */
  item: PropTypes.shape({
    content: PropTypes.shape({
      blocks: PropTypes.array,
    }),
  }).isRequired,

  /** Slug of post to load. */
  itemSlug: ItemPropTypes.itemSlug,

  /** Content to display while awaiting data. */
  placeholder: ItemPropTypes.placeholder,

  /** Slug for post type from which posts are drawn. */
  typeSlug: ItemPropTypes.typeSlug,
};

/**
 * Item block content
 * Renders content created using the admin panel block editor
 * @param {Object} props - React component props.
 * @returns {Object} React element.
 */
export const ItemBlockContent = ({ item: { content } }) => {
  if (!content || !content.blocks) {
    return null;
  }

  return <BlockContent blocks={ content.blocks } />;
};

ItemBlockContent.propTypes = propTypes;

export default createItemComponent()(ItemBlockContent);
