import React, { PropTypes } from 'react';
import './Launcher.css';
import LauncherItem from './LauncherItem';

const { object } = PropTypes;

const LauncherGroup = (props) => {
  const { contents, description, label } = props.data;
  let navBody = <div style={{ textAlign: 'center' }} />;
  const navItemArray = Array.isArray(contents)
    ? [...contents]
    : [contents];

  const navGroup = navItemArray.map((item, counter) => (
    <LauncherItem
      className="ih-nav-collection-li"
      key={`LauncherItem-${counter}`}
      data={item}
    />
  ));

  const launcherBox = { padding: '10px 20px' };
  navBody = (
    <div>
      <div className="ih-nav-collection-title">{label}</div>
      <ul
        className="small-block-grid-6 medium-block-grid-5 large-block-grid-4 ih-nav-collection-ul"
        style={launcherBox}
        aria-label={description}
      >
        {navGroup}
      </ul>
    </div>
  );

  const divStyle = { marginBottom: '0px' };
  return (
    <div style={divStyle}>{navBody}</div>
  );
};

LauncherGroup.propTypes = {
  data: object.isRequired,
};

export default LauncherGroup;