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

import DefaultItem from '../../../../elements/Item/Item';

/* Interface */
const propTypes = {
  /** Media ID of file */
  id: PropTypes.number.isRequired,
  label: PropTypes.string.isRequired,
};

/* Defaults */
const defaultProps = {
  label: '',
};

/**
 * Renders content from the `storyshare/file` block using item
 * @private
 * @param {Object} props - React component props.
 * @returns {Object} React element.
 */
export const File = ({ id, label }) => (
  <DefaultItem id={ id } typeSlug="media">
    { ({ source_url: sourceUrl }) => (
      <p>
        <a href={ sourceUrl } target="_blank" rel="noopener noreferrer">
          { label }
        </a>
      </p>
    ) }
  </DefaultItem>
);

File.defaultProps = defaultProps;
File.propTypes = propTypes;

export default File;
