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

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({
      rendered: PropTypes.string,
    }),
  }).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 content
 * Additional props will be passed through to `<div>`
 * @param {Object} props - React component props.
 * @returns {Object} React element.
 */
export const ItemContent = ({ item: { content }, ...passThroughProps }) => {
  if (!content || !content.rendered) {
    return null;
  }

  return (
    <div
      dangerouslySetInnerHTML={ { __html: content.rendered } }
      { ...passThroughProps }
    />
  );
};

ItemContent.propTypes = propTypes;

export default createItemComponent()(ItemContent);
