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

import Paragraph from '../../atoms/text/Paragraph';
import DecorativeLink from '../../atoms/links/DecorativeLink';
import './styles.css';

var UtilityPanel = function UtilityPanel(utilityPanel) {
  var descriptionClasses = ['ma__utility-panel__description'];
  var links = utilityPanel.links;
  if (!Array.isArray(links) || links.length === 0) {
    descriptionClasses.push('ma__utility-panel__description--full');
  }
  return React.createElement(
    'div',
    { className: 'ma__utility-panel' },
    React.createElement(
      'div',
      { className: descriptionClasses.join(' ') },
      React.createElement(Paragraph, utilityPanel.description)
    ),
    React.createElement(
      'ul',
      { className: 'ma__utility-panel__items' },
      links.map(function (decorativeLink, index) {
        return (
          // eslint-disable-next-line react/no-array-index-key
          React.createElement(
            'li',
            { className: 'ma__utility-panel__item js-clickable', key: index },
            React.createElement(DecorativeLink, decorativeLink)
          )
        );
      })
    )
  );
};

UtilityPanel.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Text describing the contents of the panel */
  description: PropTypes.shape(Paragraph.propTypes).isRequired,
  /** Links to display in the panel */
  links: PropTypes.arrayOf(PropTypes.shape(DecorativeLink.propTypes))
} : {};

UtilityPanel.defaultProps = {
  links: []
};

export default UtilityPanel;